Internet Explorer中的Javascript错误

Question

此错误仅在Internet Explorer中存在，但到目前为止在Mozilla中仍然有效。 基本上，当某人在下拉菜单中选择广告类型时，它应该显示适当的下拉菜单。 我将发布相关代码。

<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

我认为鼠标事件不适用于IE中的选项标签。 您可以将onchange事件应用于select元素，并提供值onchange="displayOptions(this.value)" ，然后在JS中转换该值，或将该选项的值更改为应显示的ID。

示例： http ： //jsfiddle.net/dxhBs/1/

Answer 2

您可以按照以下方式重构代码

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

删除选项标签上的onmousedown并在选择标签上创建onchange ：

<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>

然后是以下脚本：

<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>