By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,376 Members | 3,024 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,376 IT Pros & Developers. It's quick & easy.

IE delays in updating DOM SELECT element

P: n/a
Hi

I have an HTML select element in my page and it's multiple property is
disabled (one item at a time mode) but I still want to transfer all the
items in the select to the server when the form is submitted.

I'm using javascript to change the multiple property of the select
element to true and then I'm looping through each option to change its
selected property to true.

Here is the code that's executed just before the form is submitted:

var selectElement = document.getElementById("mySelectElement");
selectElement.multiple = true;
for (var n = 0; n < selectElement.options.length; n++)
{
selectElement.options[n].selected = true;
}

document.forms[0].submit();

PROBLEM....

The browser is too slow in updating the renedered DOM select element on
the page from multiple=false to multiple=true. This causes the looping
code not to work correctly resulting in only the final option being
selected (which is what I'd expect if the select element were in
single-mode). You can verify this is a speed issue by inserting an
alert() between selectElement.multiple = true and the for loop. This
gives the browser enough time to update the page element so that the
every option is selected.

SOLUTION....

Even the slighest delay between the execution of selectElement.multiple
= true and the for loop will allow enough time for the browser to
update the select element, allowing each option to be sucessfully
selected in the loop:

functionA()
{
var selectElement = document.getElementById("mySelectElement");
selectElement.multiple = true;

setTimeout("functionB()", 1);
}

functionB()
{
var selectElement = document.getElementById("mySelectElement");
for (var n = 0; n < selectElement.options.length; n++)
{
selectElement.options[n].selected = true;
}

document.forms[0].submit();
}

Only tested this on IE6.

Anyone else come accross this before? Are there any more elegant
solutions to the problem? Any other thoughts?

Cheers
Rob

May 23 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Rob Long wrote:
I have an HTML select element in my page and it's multiple property is
disabled (one item at a time mode) but I still want to transfer all
the items in the select to the server when the form is submitted.


Easy solution: Fix your design.
There should be no reason to ever submit unselected elements of a
single-select list. Ever.

If you built the list on the server side, you can built it again when the
user submits. Or you can store it in the session. Etc.

If it's built dynamically on the client side, then you can build up a hidden
field value as you populate the select list, and check its value on the
server side.

Changing a single select to multiple and then selecting every element just
reeks of really bad design.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
May 23 '06 #2

P: n/a
> If it's built dynamically on the client side, then you can build up a hidden
field value as you populate the select list, and check its value on the
server side.
Yeah this is the situation I have - a user can add and remove items
from the list client side.
Changing a single select to multiple and then selecting every element just
reeks of really bad design.


I hear what you're saying, but is it really that much more of a hack
than reading all the elements and populating a hidden CSV field (which
then needs to be parsed server side)? The two approaches are
functionally equivalent, and both centre around sumbitting unselected
options. I can't help but think that if there weren't this problem with
the DOM delay and if the select control had a built-in selectAll()
method then populating a hidden field and having to parse it server
side would then "reek of bad design"?

I.e. if you could do this just before submit

selectElement.multiple = true;
selectElement.selectAll();
form.submit();

instead of

for (var n = 0; n < selectElement.options.length; n++)
{
hiddenField.value += selectElement.options[n].value + ",";
}
form.submit();

I do see that using the select box in this way is not using it "as it
was intended to be used." However the same principle could be applied
to pretty much all web technologies ;-)

Thanks for your input tho!

May 24 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.