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)到。