javascript - 使用 knockout js绑定(bind)下拉值

我有以下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());

我的HTML是：

<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>

当我执行发布时，我在裁剪字段中拥有了整个数组，我只想发布已选择的值。

我该如何解决这个问题？
先感谢您

最佳答案

对于单选列表，您可以使用value绑定将所选值写入视图模型。有关详细信息，请参见the documentation顶部附近的注释。

尝试以下绑定：

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

这会在下拉列表中将文本显示为数组项的crop属性。它还将从下拉菜单中选择的值分配给Crop对象的RowData属性。

您可能需要将数组的名称Crop更改为Crops或其他名称，以使其与RowData对象的单数属性区分开。确实有点令人困惑。