Appending select options - IE problem/solution cause other browser issues.

Question

I have a <select> that depending on previous options is populated by a var with a bunch of <option> values.

Naturally, because IE doesn't work with innerHTML I have to append this template to the <select> which now works great in IE. HOWEVER I now need a way to clear out the select options from the previous search and in FF stop it from dropping down to the last <option> in the list.

Answer 1

Just rewrite the entire select block using innerHTML, that always works.

Answer 2

Well using YUI3:

    node.setContent(template); //removes old children, sets new template as content.
    node.set('selectedIndex', 0); //forces FF to select the first one

Edited with correct methods.

Answer 3

Foolproof way of clearing out the options from a <select>:

while( select_control.length > 0 )
     select_control.options[0] = null

Some browsers will clear the list if you do select_control.length = 0 but I've found this unreliable.

Foolproof way of inserting option:

var new_option = new Option(text, value)
try {
    select_control.add(new_option, select_control.options[0])
} catch(e) {
    select_control.add(new_option, 0)
}

The 0 is the index of the item you want your item before. To add it to the end, do this instead:

select_control.options[select_control.length] = new_option

This will also work if you want to replace a specific item, by specifying the index of an existing option.