Question

我想以列表的形式制作视图。此列表中的每一行都包含一个名称和两个下拉列表。我从后端获得一个列表，其中包含该数据。每行都有一个值用于预先选择其中一个下拉菜单并禁用另一个下拉菜单。这是列表填充的对象：

public string Name { get; set; }

public IList<Selector> first { get; set; }
public IList<Selector> second{ get; set; }

public string selectedFirst { get; set; }
public string selectedSecond { get; set; }

public bool firstEnabled { get; set; } = true;
public bool secondEnabled { get; set; } = true;

我将列表映射到我的前端到ko.observableArray（）并设法禁用以防一个人被预先选择：

 $(document).ready(function () {
    ko.mapping.fromJSON(ko.toJSON(
        @Html.Raw(JsonConvert.SerializeObject(Model.PostData.targetList))),
        {},
        vm.target);
    ko.utils.arrayForEach(vm.target(), function (item) {
      if (item.selectedFirst() != null) {
        item.secondEnabled(false);
      }
      if (item.selectedSecond() != null) {
        item.firstEnabled(false);
      }
    });
 });

在我看来这就是：

<table class="table table-condensed">
  <tbody>    
    <!-- ko foreach: target -->
      <tr>
        <td><span data-bind="text: Name"></span> </td><td>
          <div class="form-group">
            <select class="form-control"
              data-bind="enable: firstEnabled, options: first, optionsText: 'Name', optionsValue: 'id', value: selectedFirst">
            </select>
          </div>
        </td>
        <td>
          <div class="form-group">
              <select class="form-control" data-bind="enable: secondEnabled, options: second, optionsText: 'Name', optionsValue: 'id', value: selectedSecond"></select>
          </div>
        </td>
      </tr>
    <!-- /ko -->
  </tbody>
</table>

所以，剩下的就是预选。我现在已经坚持了一点...... 有谁知道怎么做？

Answer 1

我没有时间精确地掩盖你的案子，但乍一看你有一些错误。

您滥用value绑定。 value绑定应该接收您的选择绑定到的observable。因此，在您的情况下，它应分别为selectedFirst和selectedSecond。
如果您需要指定代表每个选项的值的成员名称（我猜你的id），请使用optionsValue绑定。

应用这些更改后，您的代码应如下所示。

<div class="form-group">
  <select class="form-control" data-bind="enable: secondEnabled, options: second, optionsText: 'Name', optionsValue: 'id', value: selectedSecond"></select>
</div>

预选下拉列表

1 个答案: