Knockout JS：获取下拉选择的数据并填充其他字段

Question

在这里使用 Knockout JS。

我有一个 HTML 表格，表格有 4 列。我有按钮可以向表中添加一行，然后删除每行的按钮以将其删除。我在该表的第一列中也有一个下拉列表。下拉列表由表格外的按钮单击事件填充。下面是我的html：

   <table class="table table-bordered">
    <thead class="mbhead">
      <tr class="mbrow">
       <th>Input</th>
       <th>First Name</th>
       <th>Last Name</th>
        <th>Address</th>
      </tr>
    </thead>
 <tbody data-bind="foreach: items">
<tr>
  <td>
    <select class="form-control" data-bind="options: $parent.ddl, optionsText: 'name', value: $parent.selectedColumnValue, optionsCaption: '--Select--',  event: { change: $parent.ddlChanged }">                          
                    </select>
  </td>
  <td><span class="input-small" data-bind="value: firstName" /></td>
  <td><span class="input-small" data-bind="value: lastName" /></td>
  <td><span class="input-small" data-bind="value: address" /></td>
  <td>
    <input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
  </td>
</tr>
</tbody>
</table>

<div class="col-xs-12 col-sm-6">
  <input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />
 <input type="submit" value="Get Data" data-bind="click: GetData" class="btn btn-primary" />
</div>

我的淘汰代码可以在下面的 jsfiddle 链接中看到。

我正在寻找的是：

当用户选择下拉菜单时，选定的下拉文本会填充到该行的一列，而值会填充到该行的其他列/单元格。

我的问题：

1.) 我无法从下拉列表中获取选定的文本和选定的值

当触发下拉选择的索引更改事件时，事件参数具有以下值，如控制台中所示：

名字 : ƒ c()

姓氏：ƒ c()

地址：ƒ c()

原型：对象

2.) 其次，我不知道如何根据下拉选择更新其他列值。

绑定到下拉列表的json如下：

'[{"FirstName":"Alex","LastName":"Sanders","Address":123},{"FirstName":"Sam","LastName":"Billings","Address":"Mahony Street"}]';

这是我的小提琴：

https://jsfiddle.net/aman1981/njbyumrs/12/

感谢您的意见。

Answer 1

您混淆了一些父级和级别的内容，并且您的表绑定在value 而不是text。我将下拉绑定 selectedValue 移动到 Item，因为它位于行级别而不是父级别。我使用 KO with 绑定来显示 HTML 的那部分 selectedValue 内的值。

我还添加了一个带有 KO 值的 <pre> 标记，这样您就可以看到与它交互时会发生什么以及 KO 模型数据发生变化。

附注：Item 中的三个属性在此演示中不需要是可观察的，因为在屏幕上时值不会改变。

var ViewModel = function() {
  var self = this;

  //Empty Row
  self.items = ko.observableArray([new Item()]);
  self.ddl = ko.observableArray();  

  self.addRow = function() {
    self.items.push(new Item());
  };

  self.removeRow = function(data) {
    self.items.remove(data);
  };
  self.GetData = function() {
    if (self.ddl().length === 0) {
      var item1 = new Item("Alex", "Sanders", "Maple Street");
      self.ddl.push(item1);
      var item2 = new Item("Sam", "Billings", "Mahony Street");
      self.ddl.push(item2);
    }
  }
}

var Item = function(fname, lname, address) {
  var self = this;
  self.firstName = ko.observable(fname);
  self.lastName = ko.observable(lname);
  self.address = ko.observable(address);
  self.selectedValue = ko.observable();
};

vm = new ViewModel()
vm.GetData();
ko.applyBindings(vm);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-bordered">
  <thead class="mbhead">
    <tr class="mbrow">
      <th>Input</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: items">
    <tr>
      <td><select class="form-control" data-bind="options: $parent.ddl, optionsText: 'firstName', value: selectedValue, optionsCaption: '--Select--'"> </select></td>
      <td data-bind="with: selectedValue">
        <span data-bind="text: firstName"></span>
      </td>
      <td data-bind="with: selectedValue">
        <span data-bind="text: lastName"></span>
      </td>
      <td data-bind="with: selectedValue">
        <span data-bind="text: address"></span>
      </td>
      <td>
        <input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
      </td>
    </tr>
  </tbody>
</table>

<div class="col-xs-12 col-sm-6">  
  <input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />
</div>

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>