为下拉列表预选一个值

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

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

主要 select 很简单，有选项和值。从属 select 将从计算的可观察对象中获取其选项，该可观察对象还将值设置为已设置 isselected 的条目。

如果您还希望 selected 值更新设置了 isselected 的项目，可能需要重新排列更多代码。

更新依赖列表更新后，Knockout需要一点时间来设置select。默认情况下，它将列表中的第一项设置为 selected。为了确保在设置列表后我们的默认值是 selected，我添加了一个 setTimeout（并将默认值 selection 从计算列表中分离出来）。

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>

为下拉列表预选一个值

Preselecting a value for dropdownlist

knockout-2.0

knockout.js

knockout-3.0