在淘汰赛中设置下拉值

Posted 2023-03-27

【中文标题】在淘汰赛中设置下拉值

【英文标题】：Set drop down value in knockout

【发布时间】：2014-10-07 02:19:51

【问题描述】：

我有一个表格（两列），我们可以在其中添加和删除行。 第一列是下拉列表，第二列是文本区域。

我希望能够用值将新行推入表中。

我尝试了下面的代码，但只能推送 cmets 文本，但不能推送选定的选项如何让下拉列表被选为提供的值（来自“结果”）。

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>

【问题讨论】：

请提供完整的源代码。

想知道这可能只是增加了转移注意力，你问这个有什么具体原因吗？

Guessing IDS 也应该是一个 observable 以正确更新 UI。您可以尝试将 IDS 设为 observable 并适当地为其分配值（就像我们为 observable 所做的那样）？

试过做 self.IDS = ko.observable([ value: "0", ids: "Choose.... 它不工作

可能是 self.IDS = ko.observableArray([ .... 尝试使用 ko.observableArray 进行检查，如博客 codinglookseasy.blogspot.in/2014/07/knockoutjs.html 的“Observable Array”部分中所示。

【参考方案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

【讨论】：

谢谢@nathan 我没想过要更改 UI 工作流程，但是这很有效。