Javascript error in Internet Explorer

Question

This error is only present in Internet explorer but works in Mozilla so far. Basically when someone selects an adtype on a drop down it should reveal the appropriate drop down. I will post the related code.

<script language="javascript">
    /* Hide and show appropriate drop down menu */
    var subs_array = new Array("pricefreq","pricetype"); // The id's of the hidden divs
    function displayOptions(the_sub){
        for (i=0;i<subs_array.length;i++){
            var my_sub = document.getElementById(subs_array[i]);
            my_sub.style.display = "none";
        }
        document.getElementById(the_sub).style.display = "inline-block";
    }


  </script>

                <select name="adtype" id="adtype" tabindex="1">
                    <option value="unselected">Please Select...</option>
                    <option value="to_buy" onmousedown="displayOptions('pricetype')">For Sale</option>
                    <option value="to_rent" onmousedown="displayOptions('pricefreq')">For Rent</option>
                </select>

                <select name="pricetype" id="pricetype" tabindex="8">
                    <option value="unselected">Please Select...</option>
                    <option value="Starting at">Starting At</option>
                    <option value="Fixed Price">Fixed Price</option>
                    <option value="Offers over">Offers Over</option>
                </select>

                <select name="pricefreq" id="pricefreq" tabindex="9">
                    <option value="unselected">Please Select...</option>
                    <option value="Per Week">Per Week</option>
                    <option value="Per Month">Per Month</option>
                    <option value="4 Weekly">4 Weekly</option>
                </select>

Answer 1

I don't think mouse events work on option tags in IE. You could apply an onchange event to the select element and feed the value onchange="displayOptions(this.value)" and then either translate the value in JS, or change the value of the option to ID that should show.

Example: http://jsfiddle.net/dxhBs/1/

Answer 2

you can refactor your code as follow

var subs_array = new Array("pricefreq","pricetype"); // The id's of the hidden divs
function displayOptions(val){      
    if(val == 'unselected')
      return;  
    for (i=0;i<subs_array.length;i++){
        var my_sub = document.getElementById(subs_array[i]);
        my_sub.style.display = "none";
    }

    document.getElementById(val).style.display = "inline-block";
}

            <select name="adtype" id="adtype" tabindex="1" onchange="displayOptions(this.value);">
                <option value="unselected">Please Select...</option>
                <option value="pricetype" >For Sale</option>
                <option value="pricefreq" >For Rent</option>
            </select>

            <select name="pricetype" id="pricetype" tabindex="8">
                <option value="unselected">Please Select...</option>
                <option value="Starting at">Starting At</option>
                <option value="Fixed Price">Fixed Price</option>
                <option value="Offers over">Offers Over</option>
            </select>

            <select name="pricefreq" id="pricefreq" tabindex="9">
                <option value="unselected">Please Select...</option>
                <option value="Per Week">Per Week</option>
                <option value="Per Month">Per Month</option>
                <option value="4 Weekly">4 Weekly</option>
            </select>

Answer 3

Remove your onmousedown on option tags and create an onchange on select tag:

<select name="adtype" id="adtype" tabindex="1" onchange="displayOptions(this.value)">
    <option value="unselected">Please Select...</option>
    <option value="to_buy">For Sale</option>
    <option value="to_rent">For Rent</option>
</select>

Then here's the script:

<script type="text/javascript">
    /* Hide and show appropriate drop down menu */
    var subs = {"to_buy" : "pricetype", "to_rent" : "pricefreq"}; // The id's of the hidden divs
    function displayOptions(value) {
        for(sub in subs) {
            var my_sub = document.getElementById(subs[sub]);
            if(value == sub) my_sub.style.display = "inline-block";
            else my_sub.style.display = "none";
        }
    }
</script>