在html表上的foreach绑定内，是否可以使用剔除将数据绑定到选择下拉列表？

Question

I am trying to show the same select with the same values and functions on a table. I am using the foreach binding to bind to my table objects. Here is what my code looks like:

<table class="table table-bordered" >
    <thead>
        <tr>
            <th>Nextable Name</th>
            <th>POS Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: tables">
        <tr>
            <td data-bind="text: name"></td>
            <td><select  class="select2 span8 dropdown"  data-placeholder="Select Pos Table" data-bind="options: $parent.omnivoreTables, optionsText: 'name', optionsValue:'id', value: $parent.selectedOmnivoreTableId"></select></td>
        </tr>
    </tbody>
</table>

For some reason, the dropdowns all say undefined and are not selectable at all. I inspect the page and the dropdown elements and they all have the correct options and values inside as if this worked, but it doesn't. Any help much appreciated!

Answer 1

Is this what you want it to do?

 var vm = { omnivoreTables: [ {name: 'One', id: '1'}, {name: 'Two', id: '2'} ], selectedOmnivoreTableId: ko.observable(1), tables: ko.observableArray([ {name: 'First'}, {name: 'Second'}, {name: 'Third'} ]) }; ko.applyBindings(vm); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <table class="table table-bordered"> <thead> <tr> <th>Nextable Name</th> <th>POS Name</th> </tr> </thead> <tbody data-bind="foreach: tables"> <tr> <td data-bind="text: name"></td> <td> <select class="span8 dropdown" data-placeholder="Select Pos Table" data-bind="options: $parent.omnivoreTables, optionsText: 'name', optionsValue:'id', value: $parent.selectedOmnivoreTableId"></select> </td> </tr> </tbody> </table>