Scrolling multiple-select, IE vs Firefox

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

johkar - 29 Apr 2006 21:04 GMT

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>

Reply to this Message

Csaba Gabor - 29 Apr 2006 22:41 GMT

window.setTimeout is your friend.
To scroll the selection into view in your second example in IE, you may
replace the last line of code in addit with:
window.setTimeout(function(sel){return function() {
sel.options[sel.options.length - 1].selected=true;}}(sel),50);

Csaba Gabor from Vienna
(yes I know it's a top post - I had my reasons)

> 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
[quoted text clipped - 56 lines]
> </body>
> </html>

Reply to this Message

johkar - 29 Apr 2006 23:02 GMT

Excellent, thank you.

Reply to this Message

Alena - 30 Apr 2006 20:34 GMT

Csaba, please, give me some additional information about the
function(sel){return function() {
sel.options[sel.options.length - 1].selected=true;}}(sel)
How does it work?

Reply to this Message

Csaba Gabor - 01 May 2006 00:19 GMT

> Csaba, please, give me some additional information about the
> function(sel){return function() {
> sel.options[sel.options.length - 1].selected=true;}}(sel)
> How does it work?

Please read the three posts (5-7) starting from Richard Cornford's at:
http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/94165d8695
faf91d/
and a bit of followup at (the last three posts. 6-8, of):
http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/bff638ebc5
a4fe21/

In a nutshell, the code of the OP (original poster) mostly did what he
wanted, but when you modify form elements, especially when you are in
their event handlers, the modification might not be immediate (so any
follow on usage should wait a bit), or it might be immediate, but then
subsequent event handling (including default handling) might change it,
so the change should be postponed. In both cases, a window.setTimeout
will usually accomplish the waiting.

window.setTimeout can take a string as the first argument for what to
do, but it's much more cool to use a function instead. When
.setTimeout gets around to invoking the function, it doesn't pass any
arguments (mostly. See part 2 of the second thread for an exception),
but sometimes it is convenient for that function to know about values
that existed when the .setTimeout was called. That's why the inner
function (which is returned as the 1st argument to .setTimeout because
the outer function is evaluated) is wrapped in the outer one - the
inner function will know about the variables that are defined for the
outer function. So all I did was to put the OP's line of code in a(n
inner) function (so that .setTimeout could work with it), but I needed
to wrap that function in an outer function so the that the inner
function would know about the select element, sel, when it ran.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / April 2006

Scrolling multiple-select, IE vs Firefox