Binding dropdown values using knockout js

Question

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

Brian S · Accepted Answer · 2013-09-18 16:17:53Z

1

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.

edited Sep 18, 2013 at 16:17

answered Sep 18, 2013 at 15:23

Brian S

5,8351 gold badge25 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

sss111 Over a year ago

I tried to change this and I dont have anything in my drop down and is it mandatory to have the name attribute?

sss111 Over a year ago

when i use the value:'value' it will still give the whole array in the post

Brian S Over a year ago

I'm not sure what you mean when you say you don't have anything in your dropdown. are you saying the dropdown is empty? Or is a list of blanks? I'm not sure why you're using the function to get the optionsText. I'll modify my answer to see if that helps.

Brian S Over a year ago

I've updated the binding above based on a closer look at your view model. Give that a shot.

sss111 Over a year ago

I mean when i use the value:value instead of optionsvalue:'value' I dont have anything being populated in the drop down it doesnt open

|

Collectives™ on Stack Overflow

Binding dropdown values using knockout js

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related