Autopopulating multiple select box has the first option selected in Internet Explorer

Question

I am updating a multi select box using ajax with prototype:

new Ajax.Updater(selectbox, someurl,{
    method:'post',
    parameters: "data=" + result,
    onFailure: function(){ alert('ajax updater error'); }
});

The updater works pretty well and the select box is updated with options returned by the ajax call. The only problem is that the very top option is being automaticly selected in IE.

I was trying to manually deselect it by putting

document.getElementById(selectbox).options[0].selected = false;

right after the Ajax.Updater() function and inside the onSuccess: {} clause but it was initialised before the checkbox was updated so the only way from here was to set a delay but I'm wondering if there's another way to do this?

Also adding the attribute selected="false" to every option does not solve the problem as then the last option is being selected automaticly :(

Answer 1

Add a first field with empty value (or something your program understands as "not a value in the expected domain") and select it. The HTML select field MUST have a field selected all the time (right?)

EDIT The w3c specs states that:

17.6.1 Pre-selected options Zero or more choices may be pre-selected for the user. User agents should determine which choices are pre-selected as follows:

If no OPTION element has the selected attribute set, user agent behavior for choosing which option is initially selected is undefined. Note. Since existing implementations handle this case differently, the current specification differs from RFC 1866 ([RFC1866] section 8.1.3), which states: The initial state has the first option selected, unless a SELECTED attribute is present on any of the elements. Since user agent behavior differs, authors should ensure that each menu includes a default pre-selected OPTION.

If one OPTION element has the selected attribute set, it should be pre-selected.
If the SELECT element has the multiple attribute set and more than one OPTION element has the selected attribute set, they should all be pre-selected. It is considered an error if more than one OPTION element has the selected attribute set and the SELECT element does not have the multiple attribute set. User agents may vary in how they handle this error, but should not pre-select more than one choice.

So, the behavior must be controlled by the application, as each browser can choose a different one by default. But eventually, one of them will be chosen. Usually , when it has multiple attribute defined, it selects none but... specs state nothing about that, so the empty option could work as well (to be sure).

Answer 2

try unsetting the Selected Index on the select box

$(selectbox).selectedIndex = -1;