Question

我的javascript代码如下：

/>

我希望创建一个级联下拉列表

我的第一个下拉代码如下：

var myobservablearray = ko.observableArray(["toys", "books"]);
var myselectedobservable = ko.observable();

var myotherObservableArray = ko.observableArray([{
  "toys": [{
    "name": "Bungle",
    "isselected": true
  }, {
    "name": "George"
  }, {
    "name": "Zippy"
  }]
}, {
  "books": [{
    "name": "Book1",
    "isselected": true
  }, {
    "name": "Book2"
  }, {
    "name": "Book3"
  }]
}]);
var myselectedotherobservable = ko.observable();

如何创建级联下拉列表，以使该下拉列表中所选选项的预选值为isselected = true的值。

真心感谢任何帮助

由于

Answer 1

你有几件事在这里发生。你有一个结构，可以为每个玩具和书籍绘制出值。您将使用它来获取依赖选择的选项，但它本身不需要是数组。

主要选择很简单，有选项和值。依赖选择将从计算的observable中获取其选项，该observable也将值设置为已设置isselected的条目。

如果您还希望所选值更新哪个项目设置了isselected，则可能需要重新安排更多代码。

更新更新从属列表后，Knockout需要一点时间来设置选择。默认情况下，它将设置要选择的列表中的第一个项目。为了确保在设置列表后选择了我们的默认值，我添加了setTimeout（并将默认选择与计算列表分开）。

vm = (function() {
  var myobservablearray = ko.observableArray(["toys", "books"]),
    value1 = ko.observable(),
    value2 = ko.observable();

  var dependentOptions = {
    "toys": [{
      "name": "Bungle"
    }, {
      "name": "George",
      "isselected": true
    }, {
      "name": "Zippy"
    }],
    "books": [{
      "name": "Book1",
      "isselected": true
    }, {
      "name": "Book2"
    }, {
      "name": "Book3"
    }]
  };

  var options2 = ko.computed(function() {
    if (value1() === undefined) return;
    return dependentOptions[value1()];
  });

  options2.subscribe(function(newValue) {
    setTimeout(function() {
      for (var i = 0; i < newValue.length; ++i) {
        var item = newValue[i];
        if (item.isselected) {
          console.debug("Found selected");
          value2(item);
        }
      }
    }, 0);
  });

  return {
    options1: myobservablearray,
    options2: options2,
    value1: value1,
    value2: value2
  };
}());

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: options1, value: value1"></select>
<select data-bind="options: options2, optionsText: 'name', value: value2"></select>

预选下拉列表的值

1 个答案: