Question

I have a really annoying bug thats outlined here: <select> only shows first char of selected option and I need a way to remove the display:none off of my boxes to avoid this bug. Any suggestions?

Heres the binding:

<select data-bind="options: Values, optionsText: 'DisplayNameWithCost', optionsCaption: ControlCaption, selectedOptions: SelectedValues, event: { change: $root.resolveAllAttributeUi }, disable: IsDisabled"></select>

EDIT:
I’ve managed to figure out that its because selectedOptions: SelectedValues is blank and it’s not selecting anything in IE9.. As for the fix I’m not sure. Here’s an example try in IE9 http://jsfiddle.net/9CaTa/

Answer 1

selectedOptions is only meant to be used with a multi-select list. See http://knockoutjs.com/documentation/selectedOptions-binding.html.

You probably want to use the value binding instead: http://jsfiddle.net/mbest/9CaTa/2/

Edit:

selectedOptions doesn’t work well with optionsCaption, but you could make it at least select the first item by default by creating a custom binding that wraps selectedOptions:

ko.bindingHandlers.mySelectedOptions = ko.utils.extend({}, ko.bindingHandlers.selectedOptions);
ko.bindingHandlers.mySelectedOptions.update = function(element) {
    ko.bindingHandlers.selectedOptions.update.apply(this, arguments);
    if (element.selectedIndex === -1)
        element.selectedIndex = 0;
}

Here’s your example using this binding: http://jsfiddle.net/mbest/9CaTa/3/

I noticed that if I select the caption, the selected array will not be cleared. Instead it will have a single undefined item. If you didn’t want that, you could check for it in your custom update function as well and then clear the array: http://jsfiddle.net/mbest/9CaTa/4/