javascript - 对多个选择框上的 selectedOptions 使用一个选项列表进行 knockout

Question

http://jsfiddle.net/E2AMX/有问题的确切证明，即: 我在同一页面上有多个选择框。选择框的所有选项均采用给定的形式:

<option value="#id_num">StringVal</option>

我有一个 id_nums 的 observableArray(比如 idlist)，关于选择框没有分隔。例如，

idlist = ko.observableArray([1,2,3,4]);

选择框如下

<select name="first" data-bind="selectedOptions: idlist">
    ...
    <option value="2">Blah</option>
    <option value="3">Blah</option>
    ...
</select>

<select name="second" data-bind="selectedOptions: idlist">
    ...
    <option value="1">Blah</option>
    ...
</select>

<select name="third" data-bind="selectedOptions: idlist">
    ...
    <option value="4">Blah</option>
    ...
</select>

我的问题是:当我从选择框中选择一个选项时，其他选择框返回到其初始状态。这与 selectedOptions 直接相关，因为如果我删除 selectedOptions 指令，则不会出现此问题。

任何建议都将受到欢迎。

谢谢。

Answer 1

selectedOptions 绑定(bind)旨在用于单个 <select>启用多选的标签。它将保留所选选项框中每个项目的数组。

您看到这种行为的原因是，当您从下拉列表之一中选择单个值时，selectedOptions 绑定(bind)会立即触发。逻辑是这样的:

1. 目标更新 <select>火灾。
2. 绑定(bind)从 <option> 中提取值并更新底层可观察数组。
3. 由于值已更改，Observable 数组会触发更新。
4. 辅助下拉菜单响应更新，并根据数组中的内容更新其选择的值。
5. 因为 <option> 集合中不存在任何值标签，该值被清除。

这就是您看到此行为的原因。如果您想从所有选定的选项中收集组合，那么您需要编写一个新的自定义绑定(bind)，或者为每个 <select> 创建一个单独的数组。您想要绑定(bind)到。