Why this javascript event isn't working on IE ..?

Question

I am trying to load options to drop-down list depending on the selection made on other drop-down list. I have written a code which works on almost all major browsers, FF, Opera, Safari but doesn't work in IE7.

Here is my Javascript code:

<script type = "text/javascript">
var txt1 = "<option>state1<\/option><option>state2<\/option><option>state3<\/option><option>state4<\/option>";
var txt2 = "<option>stateA<\/option><option>stateB<\/option><option>stateC<\/option><option>stateD<\/option><option>stateE<\/option>";

function states_val() {

    if(document.getElementById("country").options[0].selected==true) {
        document.getElementById("states").disabled=true;
        document.getElementById("states").innerHTML="<option>Select country<\/option>";
    }
    else if(document.getElementById("country").options[1].selected==true) {
        document.getElementById("states").disabled=false;
        document.getElementById("states").innerHTML=txt1;
    }
    else if(document.getElementById("country").options[2].selected==true) {
        document.getElementById("states").disabled=false;
        document.getElementById("states").innerHTML=txt2;
    }
}
</script>

And HTML Code:

<select id="country" name="name_country" onchange="states_val()">
    <option>select</option>
    <option>country1</option>
    <option>country2</option>
</select>
<select id="states" name="name_states"></select>

I am bound with Client-side scripting and have to simulate this using Javascript only. please help me debugging the code.

Answer 1

Yeah, many of the 'special' elements such as <select> and <table> can't have their innerHTML set in IE.

If you want to set the innerHTML from string you have to go about it in a roundabout way: set the innerHTML of a temporary div elements to <select> +your options+ </select> , then move all the option objects from the new select to the old one.

It is generally better to use DOM methods instead of innerHTML and escaped markup:

function setOptions(select, options) {
    select.options.length= 0;
    for (var i= 0; i<options.length; i++)
        select.options[i]= new Option(options[i]);
}

var statemap= [
     ['Select country'],
     ['Karnataka', 'MP', 'UP', 'Jammu & Kashmir', 'Himachal Pradesh'],
     ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Delaware', 'Florida']
];
function states_val() {
    var states= statemap[document.getElementById('country').selectedIndex];
    setOptions(document.getElementById('states'), states);
}

Answer 2

I think it is a confirmed bug ( http://alexle.net/archives/150 ) the solution is to replace the entire select element and not just the innerHTML ( the options..)

Alternatively you could manually create option nodes with

var anOption = document.createElement('option');
anOption.innerHTML = '..';
anOption.value = '..';
document.getElementByID('states').appendChild(anOption);