Question

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);
}