Knockout JS：获取下拉框选中数据并填充表格行对应字段

我来帮你实现这个基于Knockout JS的表格功能！结合你的需求，我整理了完整的实现方案，包含动态行管理、下拉框填充以及选中值同步的核心逻辑。

HTML 结构 #

<div>
  <button data-bind="click: fillDropdownOptions">填充下拉选项</button>
  <table border="1">
    <thead>
      <tr>
        <th>选择项</th>
        <th>选中文本</th>
        <th>列3</th>
        <th>列4</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody data-bind="foreach: rows">
      <tr>
        <td>
          <select data-bind="
            options: $parent.dropdownOptions,
            optionsText: 'text',
            optionsValue: 'value',
            value: selectedItem,
            optionsCaption: '请选择'
          "></select>
        </td>
        <td data-bind="text: selectedItem() ? selectedItem().text : ''"></td>
        <td><input type="text" data-bind="value: column3"></td>
        <td><input type="text" data-bind="value: column4"></td>
        <td><button data-bind="click: $parent.removeRow">删除</button></td>
      </tr>
    </tbody>
  </table>
  <button data-bind="click: addRow">添加行</button>
</div>

Knockout ViewModel 代码 #

function RowViewModel() {
  this.selectedItem = ko.observable(null);
  this.column3 = ko.observable('');
  this.column4 = ko.observable('');
}

function TableViewModel() {
  var self = this;
  
  // 存储下拉框选项
  self.dropdownOptions = ko.observableArray([]);
  
  // 存储表格行数据
  self.rows = ko.observableArray([new RowViewModel()]);
  
  // 添加新行
  self.addRow = function() {
    self.rows.push(new RowViewModel());
  };
  
  // 删除指定行
  self.removeRow = function(row) {
    self.rows.remove(row);
  };
  
  // 填充下拉框选项（模拟外部按钮触发的数据源）
  self.fillDropdownOptions = function() {
    // 这里可以替换为实际的接口请求数据
    self.dropdownOptions([
      { value: '1', text: '选项A' },
      { value: '2', text: '选项B' },
      { value: '3', text: '选项C' }
    ]);
  };
}

ko.applyBindings(new TableViewModel());

• 动态行管理：通过foreach: rows绑定表格行，addRow方法向rows数组中添加新的RowViewModel实例，removeRow方法移除指定行对象，Knockout会自动同步更新DOM。
• 下拉框填充：点击外部按钮触发fillDropdownOptions方法，将选项数据存入dropdownOptions可观察数组，下拉框通过options: $parent.dropdownOptions自动渲染出对应选项。
• 选中值同步：每行的selectedItem可观察对象绑定到下拉框的value，当用户选中选项时，selectedItem会自动更新；第二列通过text: selectedItem() ? selectedItem().text : ''绑定，实时显示选中选项的文本内容（做了空值判断避免未选择时出现报错）。

• 如果你的下拉选项是通过异步请求获取的，只需要在fillDropdownOptions方法中替换为实际的AJAX请求，请求成功后将返回数据赋值给dropdownOptions即可。
• 可以根据实际业务需求调整RowViewModel中的属性，比如为列3、列4添加输入验证或默认值。

内容的提问来源于stack exchange，提问作者aman