Scrolling multiple-select, IE vs Firefox

johkar · Apr 29, 2006

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>

Csaba Gabor · Apr 29, 2006

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)

johkar · Apr 29, 2006

Excellent, thank you.

Alena · Apr 30, 2006

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?

Csaba Gabor · May 1, 2006

Alena said:
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/94165d8695faf91d/
and a bit of followup at (the last three posts. 6-8, of):
http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/bff638ebc5a4fe21/

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.

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button	3	Nov 9, 2022
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Multi select options in a menu	1	Oct 30, 2022
Very Basic CC Validation Javascript	0	Oct 29, 2019
I dont get this. Please help me!!	2	Jan 24, 2023
Multiple drop down boxes with same options	0	Nov 30, 2006

Scrolling multiple-select, IE vs Firefox

johkar

Csaba Gabor

johkar

Alena

Csaba Gabor

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads