Looks like you shouldn't use selectedOptions: ValueText
For a multi-select list, you can read and write the selection state using selectedOptions. Technically this is a separate binding, so it has its own documentation.
Here's updated example
Question
I found a strange behavior with KO and select binding. With the bindings below, when I select either "testa" or "testb", KO changes my selection, causing the wrong value to be selected. The issues specifically appears when binding on Text values. If I change the binding to Numbers, KO works as expected. I suspect it is a bug with KO, but wanted to post here first to see if anybody could determine if I've done something wrong.
Here is a link to a JSFiddle page with the code below. I tried with all versions of KO and the problem appears in all of them: http://jsfiddle.net/ericeschenbach/C5X2U/ Also, I tested the issue in the latest versions of FireFox and Chrome, so I don't think its a crazy interaction with the browser.
HTML:
Fails:
<select name="a" data-bind="value: ValueText, options: AvailableText, selectedOptions: ValueText, optionsText: 'Text', optionsValue: 'Value', optionsCaption: 'All'"></select>
<br/>
Works:
<select name="b" data-bind="value: ValueNum, options: AvailableNum, selectedOptions: ValueNum, optionsText: 'Text', optionsValue: 'Value', optionsCaption: 'All'"></select>
<br/>
JS:
var self = {};
var availableText = [
{ "Text": "hospital north", "Value": "4" },
{ "Text": "hospital south", "Value": "5" },
{ "Text": "hospitalEast", "Value": "1" },
{ "Text": "johns place", "Value": "6" },
{ "Text": "juli", "Value": "8" },
{ "Text": "Piedmont", "Value": "2" },
{ "Text": "quinn2", "Value": "9" },
{ "Text": "test", "Value": "3" },
{ "Text": "testa", "Value": "10" },
{ "Text": "testb", "Value": "18" },
{ "Text": "tim", "Value": "7" }
];
var availableNum = [
{ "Text": "hospital north", "Value": 4 },
{ "Text": "hospital south", "Value": 5 },
{ "Text": "hospitalEast", "Value": 1 },
{ "Text": "johns place", "Value": 6 },
{ "Text": "juli", "Value": 8 },
{ "Text": "Piedmont", "Value": 2 },
{ "Text": "quinn2", "Value": 9 },
{ "Text": "test", "Value": 3 },
{ "Text": "testa", "Value": 10 },
{ "Text": "testb", "Value": 18 },
{ "Text": "tim", "Value": 7 }
];
self.ValueText = ko.observable();
self.ValueNum = ko.observable();
self.AvailableText = ko.observableArray(availableText);
self.AvailableNum = ko.observableArray(availableNum);
ko.applyBindings(self);
La solution
Looks like you shouldn't use selectedOptions: ValueText
For a multi-select list, you can read and write the selection state using selectedOptions. Technically this is a separate binding, so it has its own documentation.
Here's updated example
Autres conseils
Looks like this is a bug in knockout's select binding when dealing with text values. Here's a solution that can work for you in the meantime.
Replace your select binding with this
<select name="a" data-bind="value: ValueText, options: AvailableText, selectedOptions: ValueText, optionsText: 'Text', optionsValue: function(item){ return Number(item.Value); }, optionsCaption: 'All'"></select>
Where
optionsValue: function(item){ return Number(item.Value); }
is the magic that fixes knockout.