I have a script (or rather, a function in a script) that is supposed
to take data out of an HTML table, break it up by row, and then create
a select for each row. Each option in the select is selected, and then
the entire form is submitted for processing. The script works
perfectly in Firefox, Mac IE 5.2, Safari, and Opera, but it doesn't
work in IE.

When the script is triggered, it pulls out the data and creates the
select (and its options) perfectly. However, no matter what I've
tried, I can't get IE to select every option UNLESS I add a call to
alert().

Here is a trimmed down version of the code that I've been using for testing:

function createSelect() {
       	i = 1;
       	var playerSelect = document.createElement("SELECT");
       	playerSelect.setAttribute("name", "player[" + i + "][]");
       	playerSelect.setAttribute("id", "player"+i);
        playerSelect.multiple = true;
        for(n=0;n<4;n++) {
        	playerSelect[n] = new Option("foo" + n,"bar" + n);
      		}
    	document.forms.test.appendChild(playerSelect);
    	selectAll(playerSelect);
     }

function selectAll(select) {
    	for(i=0; i<select.length; i++) {
    		select.options[i].selected = "true";
    	}
    }

This code doesn't work in IE. When selectAll is run, IE enters the
loop, runs through selecting each option, but only shows (and submits)
the last option. However, if I add an alert after
appendChild(playerSelect) but before selectAll() returns, it works. I
suspect that this is because the alert call refreshes the window in
some way, but I don't know how I could replicate that without an
alert. Googling, MSDN, and just simply RTFM'ing have all proven to be 
unhelpful in either explaining the bug or providing a solution to it.

I know through testing that this issue is trying to select multiple
options in the same function call that created the selectbox. If I
call createSelect through one event handler and call selectAll in a
second event handler, then selectAll works fine. If I call selectAll
during the createSelect call but reference a non-dynamically generated
select, it works fine. It's only in the instance show that it doesn't
work correctly.

I've tried a number of different variants on the above code. Despite
specifying both defaultSelected and selected as true in the new
Object() call, IE fails to select multiple values. Using createElement
and setAttribute instead of new Option() produces the exact same
results, as does add(). The only way I can even coerce IE to select
multiple options is through options.selected - which, as explained,
doesn't work right.

I'd really like to get this code working - it's really the most
elegant solution to a somewhat complex problem. Otherwise, I'd have to
do something that would  slow down the application as a whole
dramatically. One of the requirements of the project is that it work
in most "recent" browsers (Win IE5+, Safari, Firefox/Mozilla/NS6+, and
Opera 7), so it needs to be crossplatform, and would ideally work
without browser sniffing. I'm not looking for code itself, but rather
an explanation of why IE is doing this and what I can do to work
around it (without adding a great deal of complexity).

---

Clarification of Question by jenigrant-ga on 16 Mar 2005 14:48 PST

I should also mention that createSelect is called via an onClick event
handler on an input button.

---

Clarification of Question by jenigrant-ga on 17 Mar 2005 07:44 PST

During testing, I found something interesting. If I add:

alert(playerSelect.type);
alert(playerSelect.multiple); 

they return "select-one" and "true" respectively. But if I reverse the
order of the two alerts, I get "true" and "select-multiple"
respectively. It seems that IE is ignoring the multiple attribute
unless "reset" by an alert().

Weird.

I'll hazard a guess that it may be related to Javascripts out-of-order
execution. It is my experience that IE's javascript will execute some
commands at once giving subtly inappropriate results. You might try
this:

if (document.forms.test.appendChild(playerSelect)) {
    selectAll(playerSelect);
}

But that's just a guess, I didn't try to run the code myself. I'm more
interested to see if this works.

No, it didn't work. Good guess, though - it's not something I would
have thought to try.

Try Calling in OnChange Event It works
using onclick it gives u the previous selected value

aswin05 - I'm not sure what you mean. If I change the button to <input
type="button" onchange="createSelect()"> then the event is never
triggered. If I try playerSelect.onChange = selectAll(playerSelect),
then it still fails as before.

Not sure if this will help, but...

Your FOR loop makes reference to "select.length" in condition 2

shouldn't that condition be on "select.options.length"?

simptech - Nope, it's the same as options.length.

simptech - Sorry, rephrase. It's been a long day. select.length and
select.options.length return the same value.

instead of :
    	selectAll(playerSelect)
use:
window.setTimeout(selectAll(select),0)

this will force IE to pump it's message loop processing the .multiple
= true statement before you attempt to multi-select.

good luck.
If you need a demo to prove let me know.