在淘汰赛中设置下拉值

Question

• 我有一个表（两列），我们可以添加和删除行。
• 第一列是下拉列表，第二列是textarea。

我希望能够使用值将新行添加到表格中。

我尝试了以下代码，但只能推送评论文本而不是选定的选项如何将下拉列表选为提供的值（来自“结果”）。

JS：（VM）

    function RowData1(IDS, Comments) {
        var self = this;

        self.Comments = ko.observable(Comments).extend({ required: true });
        self.IDS = [{ value: "0", ids: "Choose..." }, { value: "1", ids: "Drip" }, { value: "2", ids: "Flood - Ditch" }, { value: "3", ids: "Flood - Gated Pipe" }, { value: "4", ids: "Pivot" }, { value: "5", ids: "Sprinkler" }, { value: "6", ids: "Other" }];
    }

//definition for Sec1
self.Sec1 = ko.observableArray([new RowData1()]);

//some function which will add the new row with values
function addData(){
    self.Sec1.push(RowData1(result.IDS, result.Comment));}//result has the IDS value and comment from an ajax call

HTML：

<table id="1Table" class="table table-bordered">
                <thead>
                    <tr>
                        <th style="width: 22px;"><button class="btn btn-xs btn-primary" type="button" data-bind=" click: $root.Sec1_AddRow">Add</button></th>
                        <th style=" text-align:center"><b>Irrigation Delivery System</b></th>
                        <th style=" text-align:center"><b>Comments</b></th>
                    </tr>
                </thead>

                <tbody data-bind="foreach:Sec1">
                    <tr>
                        <td>
                            <button class="btn btn-xs btn btn-danger" type="button" data-bind="click: $root.Sec1_RemoveRow">Remove</button>
                        </td>
                        <td>
                            <select class="form-control" data-bind="options: IDS, value: IDS ,optionsValue:'value', optionsText:'ids'"></select>
                        </td>
                        <td>
                            <textarea class="form-control" maxlength="500" style="width:50%" data-bind="value: Comments"></textarea>
                        </td>

                    </tr>
                </tbody>
            </table>

Answer 1

你需要这样的东西

<强>视图模型

   function RowData(ids, comments) {
       var self = this;

       self.comments = ko.observable(comments).extend({
           required: true
       });
       self.ids = ko.observable(ids);
   }

   var Vm = function () {
       var self = this;
       //definition for Sec1
       self.Sec1 = ko.observableArray([]);
       self.selectedIDS = ko.observable();
       self.comment = ko.observable();

       //some function which will add the new row with values
       self.addRow = function () {
           self.Sec1.push(new RowData(self.selectedIDS(), self.comment()));
       }; //result has the IDS value and comment from an ajax call
       self.removeRow = function (item) {
           self.Sec1.remove(item);
       };

       self.IDS = ko.observableArray([{
           value: "0",
           ids: "Choose..."
       }, {
           value: "1",
           ids: "Drip"
       }, {
           value: "2",
           ids: "Flood - Ditch"
       }, {
           value: "3",
           ids: "Flood - Gated Pipe"
       }, {
           value: "4",
           ids: "Pivot"
       }, {
           value: "5",
           ids: "Sprinkler"
       }, {
           value: "6",
           ids: "Other"
       }]);

   };
   ko.applyBindings(new Vm());

查看

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="ids" class="col-sm-2 control-label">Irrigation Delivery System</label>
        <div class="col-sm-10">
            <select id="ids" class="form-control" data-bind="options: IDS, value: selectedIDS, optionsText:'ids'"></select>
        </div>
    </div>
    <div class="form-group">
        <label for="comment" class="col-sm-2 control-label">Comment</label>
        <div class="col-sm-10">
            <textarea class="form-control" maxlength="500" data-bind="value: comment"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-primary" data-bind="click: addRow">Add</button>
        </div>
    </div>
</form>
<table id="1Table" class="table table-bordered">
    <thead>
        <tr>
            <th style="width: 22px;"></th>
            <th style=" text-align:center">
                <b>Irrigation Delivery System</b>

            </th>
            <th style=" text-align:center">
                <b>Comments</b>

            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach:Sec1">
        <tr>
            <td>
                <button class="btn btn-xs btn btn-danger" type="button" data-bind="click: $parent.removeRow">Remove</button>
            </td>
            <td data-bind="text: ids().ids">

            </td>
            <td ><p data-bind="text: comments"></p>
            </td>
        </tr>
    </tbody>
</table>

<强> jsFiddle Demo