为下拉列表预选一个值

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();

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

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

<select data-bind="options: $root.myobservablearray,  value: myselectedobservable"></select> 

如何创建级联下拉菜单，以便该下拉菜单中选定选项的预选值是 isselected=true 的值。

真诚感谢任何帮助

谢谢

Answer 1

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

主选择很简单，带有选项和值。依赖选择将从计算的可观察对象中获取其选项，该可观察对象还将将该值设置为设置了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>