Knockout Multiselect Selectedoptions Contains Values Instead Of Objects

I have a select with the attribute multiple. For each option in the select I want the title attribute set (which shows a tooltip). I also want to retrieve the selected options as a

Solution 1:

Try your html like this

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

Demo

See the console for output

EDITS :

To add attributes to option you need to use optionsAfterRender. This is available only in version 3.1.0. I noticed your fiddle is using 3.0.0.

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

And create a fnction

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

Demo

Reference

See Note 2

Solution 2:

Similar to @MuhammadRaheel, I used optionsAfterRender:

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

But I needed to use ko.applyBindingsToNode:

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

Solution 3:

Use options and optionsText bindings instead of foreach:

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

Here is demo: http://jsfiddle.net/p5E8y/