IE 6 versus IE 7 problem

[fulgorasoftware]

I have some JS that works fine in IE 7 but not IE 6.

First, here's the relevant HTML:

<select name="DisplayOrder" size="6" style="{width:100px}"
id="DisplayOrder">
<option value="Practice">Practice</option>
<option value="Provider">Provider</option>
<option value="Medication">Medication</option>
</select>

When the user clicks on the submit button we want to select and send
all options in the DisplayOrder control, so the submit button calls
getAllOrder():

function getAllOrder() {

// select everything in the DisplayOrder control
var ctrl = document.getElementById( 'DisplayOrder' );
ctrl.multiple = true;
for ( i = 0; i < ctrl.length; i++ ) {
ctrl.options[ i ].selected = true;
}

return true;
}

In IE 7 it selects all three options and sends them. In IE 6 it only
select the LAST option (I suspect because multiple=true is failing).

I cannot set multiple=true in the <select> control because of other
things I am doing, prior to submitting and outside the scope of this
question.

- Why does this code work correctly in IE 7 and not IE 6?
- Is there anything I can do to make it work in IE 6?

 

[RobG]

I have some JS that works fine in IE 7 but not IE 6.

First, here's the relevant HTML:

<select name="DisplayOrder" size="6" style="{width:100px}"
id="DisplayOrder">
<option value="Practice">Practice</option>
<option value="Provider">Provider</option>
<option value="Medication">Medication</option>
</select>

When the user clicks on the submit button we want to select and send
all options in the DisplayOrder control, so the submit button calls
getAllOrder():

function getAllOrder() {

// select everything in the DisplayOrder control
var ctrl = document.getElementById( 'DisplayOrder' );
ctrl.multiple = true;
for ( i = 0; i < ctrl.length; i++ ) {
ctrl.options[ i ].selected = true;
}

return true;

}

In IE 7 it selects all three options and sends them. In IE 6 it only
select the LAST option (I suspect because multiple=true is failing).

I cannot set multiple=true in the <select> control because of other
things I am doing, prior to submitting and outside the scope of this
question.

- Why does this code work correctly in IE 7 and not IE 6?

It seems that IE 6 does not change the element to mulitiple until
after the function has finihsed.

- Is there anything I can do to make it work in IE 6?

Use a call to setTimeout to do the selection after changing the
element to multiple, e.g. (crappy demo, but you should get the idea):

<input type="button" value="Change to multiple"
onclick="
var el = document.getElementById('DisplayOrder');
el.multiple = true;
setTimeout( function() {
for (var i=0, len=el.length; i<len; ++i) {
el.selected = true;
}
}, 0);
">