1

私は以下の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>

投稿を行うと、選択した値のみを投稿したい作物フィールドにすべての配列があります。

どうすればこれを達成できますか。どこが間違っていますか。前もって感謝します

4

1 に答える 1

1

単一選択リストの場合、valueバインディングを使用して、選択した値をビューモデルに書き込みます。詳細については、ドキュメントの上部にある注記を参照してください。

以下のバインディングを試してください。

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

これにより、ドロップダウンにテキストがcrop配列項目のプロパティとして表示されます。また、ドロップダウンから選択した値をオブジェクトのCropプロパティに割り当てRowDataます。

配列の名前 Crop を Crops などに変更して、RowData オブジェクトの単一のプロパティと区別することができます。そのままでは、少し混乱します。

于 2013-09-18T15:23:22.473 に答える