Adding option elements to select on focus

I am attempting to dynamically add an option to a select box when the
box is selected (click or focus). This works fine using Firefox by
either creating a new element and appending it to the SELECT's
children, or by creating a new Option() and setting it to the
select.options array.

My problem is in IE whenever it adds the element the select box does
not drop down. For instance if I have my code run onFocus when the
select box is clicked the option is added and the box does not drop
down. If I click it a second time while it still has focus it will
display the new value.

Is there a trick or work around to have IE handle this the same as FF?

thanks,
jc

re: Adding option elements to select on focus

Josh C. a écrit :IE doesn't leave focus so easily

add : this.options.selectedIndex = this.options.length-1;

try also : onmousedown (... ? ! ! ? )

<script type="text/javascript">
function extend(quoi) {
quoi = quoi.elements['ici'];
quoi.length=0;
for(var i=0; i<20; i++)
quoi.options[quoi.length] = new Option(i, i);
quoi.options.selectedIndex=quoi.length-1;
}
</script>
<form action="#" onsubmit="return confirm('sure?');">
<p><select name='ici' onfocus="extend(this.form);">
<option>test</option>
</select>
</form>

My browsers (IE Mac Fx ...) works all the same : while you don't click
outside the select, focus stay on it and the function do not more fire.