Question

我有使用Knockout动态创建的X个下拉列表，现在我想预先为每个下拉列表选择一个选项。巧合的是，我有一个可观察的数组，其X条目对应于我想要的选项。如何使用此数组选择我的选项？

示例视图模型：

function AppViewModel() {
    var self = this;
    self.array = ko.observable(["Dog","Cat"]);
}

在这个例子中，我有两个下拉列表，两个下拉列表都有“Dog”和“Cat”选项。我想为第一个下拉选择“Dog”，为第二个下拉选择“Cat”。

这是我的HTML：

<div data-bind="foreach: array">
      <label>
        <select data-bind="options: array"></select>
      </label>
</div>

Answer 1

根据docs，您需要为所选绑定value绑定。

function AppViewModel() {
    var self = this;
    self.array = ko.observable(["Dog","Cat"]);
    self.selected = ko.observable(self.array()[0]);
}

然后：

<select data-bind="options: array, value: selected "></select>

示例：http://jsfiddle.net/H6DL5/

如果你有很多这些下拉菜单，那么你可以使用一系列subVM来获得结果。像这样：

function AppViewModel() {
    var self = this;
    self.array = ko.observable(["Dog", "Cat", "Weasel"]);
    self.dropDowns = ko.observableArray([
    new SubVM("Dog"),
    new SubVM("Cat")]);
}

function SubVM(selected) {
    var self = this;
    self.selected = ko.observable(selected);
}

你可以像这样绑定：

<div data-bind="foreach:dropDowns">
    <select data-bind="options: $parent.array, value: selected "></select>
</div>

现在，您可以通过将其添加到父虚拟机中的dropDowns数组来添加所需数量的下拉列表。

示例：http://jsfiddle.net/H6DL5/1/

如果在每个下拉列表中需要不同的选项，只需为SubVM添加可用选项的数组，并绑定options而不是父列表。

使用knockout.js中的可观察数组填充下拉列表

1 个答案: