Demo

Question

我有一个属性为select的select。对于select中的每个选项，我想要title属性集（显示工具提示）。我还想将所选选项检索为对象数组。我设法得到了我想要的东西，除了选择的选项不返回一个对象数组但是返回一个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包含对象而不是字符串？

Answer 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

Answer 2

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

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

但是我需要使用ko.applyBindingsToNode：

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

Answer 3

使用选项和 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/

knockout multiselect selectedOptions包含值而不是对象

3 个答案:

Demo

编辑：

Demo

Reference