在html表的foreach绑定中，是否有可能将数据绑定到一个带有knockout的select下拉列表?

Is it possible to data-bind to a select dropdown with knockout while inside a foreach binding on a html table?

本文关键字：一个 knockout 下拉列表 select 绑定 foreach 表的 html 数据绑定 有可能 是否      更新时间：2023-09-26

我试图在表上显示具有相同值和函数的相同select。我使用foreach绑定绑定到我的表对象。下面是我的代码:

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

由于某些原因，下拉框都显示未定义，并且根本不可选择。我检查页面和下拉元素，他们都有正确的选项和值里面，如果这工作，但它没有。任何帮助非常感激!

这是你想让它做的吗?

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>

相关文章：