CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcknockout.js
sss111
sss111

Reputation: 349

Binding dropdown values using knockout js

I have the below JS:

function RowData(Township, Range, Section,Crop, Acres) {
var self = this;

self.Township = Township;
self.Range = Range;
self.Section = Section;
self.Crop = [{ value: "1", crop: "Irrigated Corn" }, { value: "2", crop: "Irrigated Sugar Beets" }, { value: "3", crop: "Irrigated Soybeans" }, { value: "4", crop: "Irrigated Sorghum (Milo, Sudan)" }, { value: "5", crop: "Irrigated Dry Edible Beans" }, { value: "6", crop: "Irrigated Potatoes" }, { value: "7", crop: "Irrigated Alfalfa" }, { value: "8", crop: "Irrigated Small Grains" }, { value: "9", crop: "Range/Pasture/Grass (Brome, Hay, CRP)" }, { value: "10", crop: "Urban Land" }, { value: "11", crop: "Open Water" }, { value: "12", crop: "Riparian Forest and Woodlands" }, { value: "13", crop: "Wetlands" }, { value: "14", crop: "Other Agricultural Lands (Farmsteads, Feedlots, etc.)" }, { value: "15", crop: "Irrigated Sunflower" }, { value: "16", crop: "Summer Fallow" }, { value: "17", crop: "Roads" }, { value: "18", crop: "Dryland Corn" }, { value: "19", crop: "Dryland Soybeans" }, { value: "20", crop: "Dryland Sorghum" }, { value: "21", crop: "Dryland Dry Edible Beans" }, { value: "22", crop: "Dryland Alfalfa" }, { value: "23", crop: "Dryland Small Grains" }, { value: "24", crop: "Dryland Sunflower" }, { value: "25", crop: "Dryland Sugar Beets" }, { value: "26", crop: "Dryland Potatoes" }, { value: "27", crop: "Irrigated Hay" }, { value: "28", crop: "Irrigated Rotation Pasture" }];
self.Acres = Acres;
}
function PBHEPViewModel() {
var self = this;

//Present Conditions
self.present_conditions = ko.observableArray([
    new RowData()
]);
self.present_AddRow = function () {
    self.present_conditions.push(new RowData())
}
self.present_RemoveRow = function (row) { self.present_conditions.remove(row) };

//Future Conditions
self.future_conditions = ko.observableArray([
    new RowData()
]);
self.future_AddRow = function () {
    self.future_conditions.push(new RowData())
}
self.future_RemoveRow = function (row) { self.future_conditions.remove(row) };

//submit the data
self.submit_conditions = function () {

    var PC_data = ko.toJSON(self.present_conditions());
    var FC_data = ko.toJSON(self.future_conditions());

    $.post("/Home/PBHEP", { "PC": PC_data, "FC": FC_data});
}
}
ko.applyBindings(new PBHEPViewModel());

And my HTML is:

<tbody data-bind="foreach:future_conditions">

        <tr>
            <td style =" text-align:center">
                <input class="input-small" type="text" placeholder="Township" data-bind="value: Township"></td>
            <td style =" text-align:center">
                <input class="input-small" type="text" placeholder="Range"data-bind="value: Range"></td>
            <td style =" text-align:center">
                <input class="input-small" type="text" placeholder="Section"data-bind="value: Section"></td>
            <td style =" text-align:center">
                 <select name="" data-bind="options: Crop, optionsValue: 'value', optionsText: function (i) { return i.crop }, optionsCaption: 'Choose a Crop...'"></select>
            </td>
            <td style =" text-align:center">
                <input class="input-small" type="text" placeholder="Acres"data-bind="value: Acres"></td>
            <td>
                <button class="btn btn-small btn btn-danger" type="button" data-bind="click: $root.future_RemoveRow"><i class="icon-minus-sign icon-white"></i></button>
            </td>
        </tr>
    </tbody>

When I do the post I have all the entire array in the crop field where i only want to post the value that has been selected.

How do I achieve this where am I going wrong. Thank you in advance

Upvotes: 1

Views: 6328

Answers (1)

Brian S
Brian S

Reputation: 5785

For a single-select list, you use the value binding to write the selected value to your viewmodel. See the note near the top of the documentation for details.

Try the below binding:

<select name="" data-bind="options: Crop, value: Crop, optionsText: 'crop', optionsCaption: 'Choose a Crop...'"></select>

This displays the text in the drop down as the crop property of your array items. It also assigns the selected value from the drop down to the Crop property of the RowData object.

You may want to change the name of the array, Crop, to Crops or something to differentiate it from the singular property on the RowData object. It is a little confusing, as is.

Upvotes: 1

Related Questions