Knockout selectedOptions Binding issue with int arrays.
This fiddle demonstrates the issue in KnockoutJs where the selectedOptions binding on a select element wont work with ints.
HTML
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<h1>Integer Binding</h1>
<select multiple="" data-bind="options: optionsInt, selectedOptions: selectedValuesInt"></select>
<label>value: </label>
<span data-bind="text: selectedValuesInt"></span>
<br /><br />
<select data-bind="options: optionsInt, value: selectedValueInt"></select>
<label>value: </label><span data-bind="text: selectedValueInt"></span>
<br /><br />
<h1>String Binding</h1>
<select multiple="" data-bind="options: optionsStr, selectedOptions: selectedValuesStr"></select>
<label>value: </label>
<span data-bind="text: selectedValuesStr"></span>
<br /><br />
<select data-bind="options: optionsStr, value: selectedValueStr"></select>
<label>value: </label><span data-bind="text: selectedValueStr"></span>
<br /><br/>
<button data-bind="click: defaultSelections">Default Selections</button>
CSS
select { width:200px; }
h1 { font-weight: bold; font-size: 21px; margin-bottom: 10px; }
JavaScript
var viewModel =
{
optionsInt: ko.observableArray([1, 2, 3]),
selectedValueInt: ko.observable(2),
selectedValuesInt: ko.observableArray([2, 3]),
optionsStr: ko.observableArray(["1", "2", "3"]),
selectedValueStr: ko.observable("2"),
selectedValuesStr: ko.observableArray(["2", "3"]),
defaultSelections: function()
{
viewModel.selectedValueInt(2);
viewModel.selectedValuesInt([2, 3]);
viewModel.selectedValueStr("2");
viewModel.selectedValuesStr(["2", "3"]);
}
}
$(function() {
ko.applyBindings(viewModel);
});