I have a multiple select box that is dynamically populated based on a selection from another select box. There are 3 possible results:
Every click on the parent select box replaces the html of the child <select> with a “Loading…” message. Then it runs an ajax request to a server side page that returns JSON data back to the post-processing function.
In that post-processing function I check to see if any data was returned for that selection.
If data was returned, replace the child multi-select with the data.
If no data was returned then replace the child multi-select with a default message.
Now the problem I’m seeing. When I select an item from the parent select that I know returns data, the child multi-select seemingly doesn’t update, but when I mouse over the select I see the changes.
BUT! On a whim, I created another <div> just to see if it was in fact a problem with the select, so everytime I updated the <select> I also updated this new <div>. Magically it all worked. So what I ended up doing is keeping the <div> there, just set it to display:none and now it works like it “should”.
Any ideas as to what this is all about!?
Oh and I’m using jQuery.ajax and jQuery.html to handle the processing.
Seems pretty weird. Do you have any mouseover events on the select or this div? The purpose of the DIV is a bit mysterious. Is this simply a container for the SELECT?
Also, replacing the HTML of the <select> with a message sounds like invalid HTML. A <select> can only contain <option> or <optgroup> elements.
Another possibility is some browser bug (particularly if testing on IE) to do with creating <option> elements on the fly. I can’t remember what the exact bug is, but I think it’s that you can’t create them with innerHTML.
Anyway, code is worth a thousand words. If you can provide a working link then we can Firebug it and get to the bottom of this.
The intial purpose was just to see if the behavior was the same using a different element. To debug whether it was my ajax or overall js methodology. And when it actually snapped the <select> in gear I was shocked.
Well, the message is this:
<option value=“” disabled=“disabled”>Loading…</option> , so it’s all good
It is in IE and it’s an intranet site. It would take quite a bit to get an online test version working.
At least I’m not crazy. I’ll look into that IE bug, thanks!
