【问题标题】：knockout multiselect selectedOptions contains values instead of objects淘汰赛多选 selectedOptions 包含值而不是对象
【发布时间】：2014-06-19 09:51:59
【问题描述】：

我有一个带有多个属性的选择。对于选择中的每个选项，我想要设置标题属性（显示工具提示）。我还想将选定的选项作为对象数组检索。除了所选选项不返回对象数组而是 valueTexts 数组这一事实之外，我设法得到了我想要的东西。我不知道如何在该数组中获取对象。

这是我目前得到的代码：

HTML：

<select multiple style="width: 150px;" size=15 
        data-bind="foreach: options, selectedOptions: selectedOptions">
    <option data-bind="text: Name, attr: { 'title': Name}"></option>
</select><br />
<button data-bind="click: showSelectedOptions">Show selection</button>

Javascript：

function Option(id, name){
    var self = this;

    self.Id = id;
    self.Name = name;
}

function ViewModel(){
    var self = this;

    self.options = ko.observableArray([
        new Option(0, "NormalText"),
        new Option(1, "AnotherText"),
        new Option(2, "WaaaaaaaaaaaaaaaayTooLongText")
    ]);
    self.selectedOptions = ko.observableArray([]);

    self.showSelectedOptions = function(){
        alert(self.selectedOptions());
        //what I would like to have:
        //if (self.selectedOptions().length > 0)
        //    alert(self.selectedOptions()[0].Name);
    }
}

ko.applyBindings(new ViewModel());

以及演示的小提琴链接：http://jsfiddle.net/c63Bb/1/

我需要添加或更改什么以使数组 selectedOptions 包含对象而不是字符串？

【问题讨论】：

您不需要为此使用 foreach。看看here

标签： javascript knockout.js

【解决方案1】：

像这样尝试你的 html

<select 
    data-bind="
        options: options,
        selectedOptions : selectedOptions,
        optionsText: 'Name',
        optionsCaption: 'Choose...'
    "
 size="5" multiple="true"></select>

Demo

查看控制台的输出

编辑：

要为选项添加属性，您需要使用optionsAfterRender。
这仅在版本 3.1.0 中可用。我注意到你的小提琴使用的是 3.0.0。

<select 
    data-bind="
        options: options,
        selectedOptions : selectedOptions,
        optionsText: 'Name',
        optionsAfterRender: $root.setTitle
    "
 size="5" multiple="true"></select><br />
<button data-bind="click: showSelectedOptions">Show selection</button>

并创建一个函数

self.setTitle = function(option, item) {
    option.title = item.Name
}

Demo

Reference

见注2

【讨论】：

但是如果我不使用foreach并使用options绑定，如何在select标签内的option标签中添加title属性并绑定一个值呢？
@Cornelis 我已经更新了你现在可以看到的答案。
谢谢，optionsAfterRender 完成了这项工作。虽然 $root 不是必需的。事实上，它在我需要显示工具提示的原始项目中给出了错误。我也尝试使用 $parent 或 $parents 但只要 setTitle 和 options 在同一个 ViewModel 中，您就不需要使用 $root 或 $parent 等切换到不同的 viewModel。
这只是一个例子。您可以根据需要使用任何模型来定义和引用函数。很高兴它有帮助！！！

【解决方案2】：

类似于@MuhammadRaheel，我使用了optionsAfterRender：

<select data-bind="optionsAfterRender: myFunc, ...">

但我需要使用ko.applyBindingsToNode:

var self.myFunc = function(option, item) {
    ko.applyBindingsToNode(option, { attr: { title: 'Tooltip!' } }, item);
}

【讨论】：

【解决方案3】：

使用 options 和 optionsText 绑定而不是 foreach：

<select multiple style="width: 150px;" size=15 
    data-bind="options: options, optionsText: 'Name', selectedOptions: selectedOptions">
<option data-bind="text: Name, attr: { 'title': Name}"></option>
</select>

这里是演示：http://jsfiddle.net/p5E8y/

【讨论】：