Javascript 基于另一个json数组将ObservalArray映射到多个SELECT

3I使用jquery对$.getJSON进行查询，并用此信息填充SELECT下拉列表（

s值是

ItemID

，文本是

DisplayName

）：

您会注意到清单中的Items数组具有

ItemID

——它与我填充SELECT的

ItemID

匹配

我使用Knockout的mapping插件，只需

ko.mapping.fromJS（manifest）

，效果非常好。输入和跨度以及我映射位置、源、状态等的位置都做得很好

我的问题是，我希望SELECT是一个倍数，并且代表我清单中的项目（添加/删除它们的能力）。HTML类似于：

<input data-bind="value: LocationSource"/>
<input data-bind="value: LocationDestination"/>
<select multiple="multiple" data-bind="value: Items"></select>   // this thing

然后，在HTML中，我有：

<select data-bind="options: AllItems,  optionsText: 'DisplayName', selectedOptions: Items" size="15" multiple="true"></select>

这让我很快就到了那里。它像我期望的那样操纵清单--现在唯一的问题是，当我第一次加载清单并应用绑定时，SELECT不会自动选择清单中的项。我怀疑这是因为Items数组条目和ItemOptions条目不相同？它们都有ItemID，但一个有DisplayName，另一个没有

更新2

添加了一个JSFIDLE：它将演示它的工作原理，但不选择初始加载：

---

如果我正确理解了您的问题，您想使用

所以你会有这样的想法：

 <select data-bind="options: ItemOptions, selectedOptions: (manifest.)Items, optionsText: 'name', optionsValue: 'id'" size="5" multiple="true"></select> 

ItemOptions = [
    {name: "opt1", id: 1},
    {name: "opt2", id: 2},
    {name: "opt3", id: 3},
    {name: "opt4", id: 4} 
]

---

这是正确的路径。我马上就到了，除了清单中的项目只有一个数字数组，没有ItemID标签——当我开始四处点击时。它也没有预先选择它们。我怀疑这是因为Items中的内容和ItemOptions中的内容是相同风格的数组？如果省略

optionsValue

参数，就可以得到整个对象，我可以做到这一点-效果很好，它给了我想要的标签。现在我唯一的问题是，当我最初加载清单（应用绑定）时，SELECT没有选中清单中的选项（可能是因为它们不是类似的数组，一个只有ItemID，另一个有ItemID和DisplayName）。简言之，在我上面的示例中，在SELECT中没有选择项目2、3、6。有什么想法吗？我已经更新了我原来的帖子，以反映它现在的位置，但在加载和应用绑定时没有选择最初的项目。如果我点击SELECT，它会正确填充项目，但在初始加载时，它并没有选择它已经拥有的内容。在javascript中，对象{“ItemId”：1，“DisplayName”：“Apples”}=对象{“ItemID”：1，“DisplayName”：“Apples”}。这就是为什么您要指定optionsValue参数，因为这样您就给了knockoutjs一个“键”来比较是否相等。这样，您可以设置self.SelectedItems（[1,2,3]），它将在multi-select中选择这些。但是如果您确实需要将id作为对象，您可以向

SelectedItems

添加一个订阅，并让该订阅更新

Items

对象，

self.AllItems = ItemOptions;                                    //doesn't need to change, dont obvserable it, right?
self.Items = ko.observableArray(model.Items);   

<select data-bind="options: AllItems,  optionsText: 'DisplayName', selectedOptions: Items" size="15" multiple="true"></select>

 <select data-bind="options: ItemOptions, selectedOptions: (manifest.)Items, optionsText: 'name', optionsValue: 'id'" size="5" multiple="true"></select> 

ItemOptions = [
    {name: "opt1", id: 1},
    {name: "opt2", id: 2},
    {name: "opt3", id: 3},
    {name: "opt4", id: 4} 
]