Problems populating a select list onfocus

[xram]

I am trying to populate a select list when it receives focus. I am
obtaining the data for the list via XmlHttpRequest and then using a
for loop to loop through each option and add it to the select using
the following code:

document.getElementById("selDesigner").options[0] = new Option("Select
a designer", "");
for (var i = 0; i < arrDesigners.length; i++)
{
document.getElementById("selDesigner").options[i + 1] = new
Option(arrDesigners.text, arrDesigners.value);
}

The select list is populated fine. The only problem I have occurs when
you click on the select list for the first time in IE6 or IE7, the
population of the select element causes it to close. It works fine in
Opera and Firefox however (i.e. the drop-down list stays open when
clicked).

I've also tried to add options to the drop-down list by setting the
innerHTML to a string containing the HTML of the option elements, but
this doesn't work either.

Has anyone found a workaround to this problem?

Any help much appreciated.

 

[Bart Van der Donck]

I am trying to populate a select list when it receives focus. I am
obtaining the data for the list via XmlHttpRequest and then using a
for loop to loop through each option and add it to the select using
the following code:

document.getElementById("selDesigner").options[0] = new Option("Select
a designer", "");
for (var i = 0; i < arrDesigners.length; i++)
{
document.getElementById("selDesigner").options[i + 1] = new
Option(arrDesigners.text, arrDesigners.value);
}

The select list is populated fine. The only problem I have occurs when
you click on the select list for the first time in IE6 or IE7, the
population of the select element causes it to close. It works fine in
Opera and Firefox however (i.e. the drop-down list stays open when
clicked).

I don't think it's possible in MSIE, and if it were, I think it would
be awkward anyhow.

Is it really necessary that text/values are requested from server
again on every onFocus() ? Probably not, unless you're working with
options that change frequently *without any user interaction*.

I don't think you need onFocus() in this case. It causes unneeded
traffic and slows down everything.

I surmise that the new 'selDesigner' options depend on another select-
element, since you are using text/value pairs for 'arrDesigners' in an
array of objects. I think that using onChange() on the other element
to update 'selDesigner', would be a better strategy.

Hope to have helped more than confused,

 

[Marcos Toledo]

I don't think there are any workarounds for your problem. I've seem
this in my webapp myself, but I really could receive updates without
user interaction (not the current user anyway, it would be other
users), and I'd have to queue the new values and add them only after
the blur, to avoid closing the user's select box while he was
selecting.

I think Bart has an excellent advice: if the contents depend on some
other event, adding it the the "change" of the other control would be
best.

Let us know if that's not possible or not a good strategy for your
particular app.

 

[xram]

Thanks for your responses Bart and Marcos. Just to clarify the
situation: I am not populating the drop down list each time it
focuses, only the first time it receives focus it will be loaded. The
reason for this is that the SQL required to populate the drop down
list is quite intensive for the database to process. This drop down
list was originally getting populated with server side (ASP.NET) code
every time the page loaded. The site it is on is quite busy so my idea
was to only populate it when a user used the drop down list (i.e.
onfocus). But due to the issues with this in IE it is not a solution I
can implement.

As a result I ended up having the drop down list populated using an
XmlHttpRequest through the window's onload event. The page that
produces the XML for this request is cached on the server side and as
a result has seen the performance improvements that were required.