IE 6 Javascript replacing select dropdown issue

Question

Hello.

I have the following code - it is used to load a drop down when the user clicks on a drop down with only the loaded default option, because this drop down is quite large and IE doesn't like that very much. Here is the code:

function populateDropDown(id, code) {
    var currentSelect = document.getElementById(id);
    <%--Don't enable the dropdown if it has more than one entry already - assume this to be populated.--%>
    if(currentSelect.length == 1) {
            currentSelect.remove(0);
            var selectedIndex = 0;
            for(var index = 0; index < codes.length; index++) {
                    var newOption = document.createElement('option');
                    newOption.value = codes[index];
                    newOption.text = values[index];
                    try {
                            currentSelect.add(newOption, null); // standards compliant
                    }
                    catch(ex)
                    {
                            currentSelect.add(newOption); // IE only
                    }
                    if(codes[index] == code) {
                            selectedIndex = index;
                    }
            }
            currentSelect.selectedIndex = selectedIndex;
    }
}

This code works in Opera 9.x, IE 7 - but not IE 6 (I test in Opera because I like Opera Dragonfly - but it really only has to work in IE 7 and 6).

In IE 6, the code does populate the drop down, but it sets the selected value to the first value in the drop down list, not the selected value. The selected value is set to the proper value in the other two browsers mentioned.

I'm no Javascript guru by any means - so if someone knows why IE 6 is doing this and how to get around it, that'd be appreciated. Also note that the comment there is a JSP comment - it is stripped out before this Javascript is sent to the browser (it's not an invalid comment).

Answer 1

I've run into this exact problem before. If you try to access dynamically created child elements of a select element (options) before focus is given back to the document, setting selectedIndex will fail and will default to the first item.

I'll post back when I can find the article I found the fix in. Stay tuned!

UPDATE:

Found it!

Instead of setting the selectedIndex on the <select> element, find the <option> element you want and set its 'selected' attribute to true:

var currentSelect = document.getElementById(id);
if(currentSelect.length == 1) {
        currentSelect.remove(0);
        var selectedIndex = 0;
        for(var index = 0; index < codes.length; index++) {
                var newOption = document.createElement('option');
                newOption.value = codes[index];
                newOption.text = values[index];
                try {
                        currentSelect.add(newOption, null); // standards compliant
                }
                catch(ex)
                {
                        currentSelect.add(newOption); // IE only
                }
                if(codes[index] == code) {
                        selectedIndex = index;
                }
        }
        // currentSelect.selectedIndex = selectedIndex;
        // Try this:
        currentSelect.options[selectedIndex].setAttribute('selected', true);
}

Answer 2

Cory's comments helped me out, but his code did not produce the results I was hoping for under IE 6. However, he pointed out that focus may be the problem. The following snippet makes it select properly under IE 6 - it looks really weird, because it loads the drop down and then selects it, but the functionality is what I want and it is faster than static HTML to load.

currentSelect.focus();
currentSelect.selectedIndex = selectedIndex;

Focusing on the input, then setting the selected index, works in IE 6 - although the dropdown jumps to the first input really quick, and then jumps back. But, as long as it works...

Answer 3

thanks for the help!!! it works.