Scrolling multiple-select, IE vs Firefox

Why does this code work in IE and Firefox and the second example does
not work in IE. While these are just sample scripts, my actual scripts
will be transferring options from one multi-select list to another. I
want the most recently added one to scroll into view.

Works in both:
<html>
<head>
<title>test</title>
</head>
<body>
<form>
<select name="a" multiple size="5" style="width:200px">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" value="Set"
onclick="this.form.elements['a'].options[8].selected=true">
</form>
</body>
</html>

Does not work in IE. Added option not scrolled into view.
<html>
<head>
<script type="text/javascript">
function addit(myForm,myElm){
var opt = new Option('my new option', 'value');
var sel = myElm;
sel.options[sel.options.length - 1].selected=false;
sel.options[sel.options.length] = opt;
sel.options[sel.options.length - 1].selected=true;
}
</script>
</head>
<body>
<form>
<select name="a" multiple size="5" style="width:200px">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" value="Set"
onclick="addit(this.form,this.form.elements['a'])">
</form>
</body>
</html>

.

Quantcast