2

我有两个下拉菜单。在选择一个菜单时，其他菜单的值会发生变化。但在 IE 中它不起作用，我的下拉菜单显示为空。这是我的代码

<div style="position:absolute; bottom:95px; right:631px;">
    <select id='Country' name='Country' style="width: 148px;background-color:white;">
        <option selected='selected'>All Countries</option>
        <option>Australia</option>
        <option>Cambodia</option>
        <option>China</option>
        <option>India</option>
        <option>Indonesia</option>
        <option>Hong Kong</option>
    </select>
    <select id='Airport' name='Airport' style="width: 148px;background-color:white;"></select>
</div>

JavaScript 代码

<script type="text/javascript">

 (function(){

     var bOptions = {"All Countries":["All Airports"], "Australia":["Sydney","Brisbane","Melbourne","Perth"], "Cambodia":["Phnom Penh"], "China":["Beijing","Guangzhou","Hangzhou","Kunmimg","Shanghai Pudong","Shanghai Hongqiao"],
         "India":["Bangalore","Mumbai","Delhi"],"Indonesia":["Jakarta","Bali"],"Hong Kong":["Hong Kong"],"Japan":["Osaka","Narita","Haneda"],"Korea":["Seoul Gimpo","Seoul Incheon"],
         "Macau":["Macau"],"Malaysia":["Kuala Lumpur"],"New Zealand":["Auckland"],"Philippines":["Manila"],"Singapore":["Singapore"],"Taiwan":["Taipei","Kaohsiung","Songshan"],"Thailand":["Bangkok","Phuket"],
         "Vietnam":["Hanoi","Ho Chi Minh City"]};

        var A = document.getElementById('Country');
        var B = document.getElementById('Airport');

        //on change is a good event for this because you are guarenteed the value is different
        A.onchange = function(){
            //clear out B
            B.length = 0;
            //get the selected value from A
            var _val = this.options[this.selectedIndex].value;
            //loop through bOption at the selected value
            for ( var i in bOptions[_val]){
                //create option tag
                var op = document.createElement('option');
                //set its value
                op.value = bOptions[_val][i];
                //set the display label
                op.text = bOptions[_val][i];
                //append it to B
                B.appendChild(op);
            }
        };
        //fire this to update B on load
        A.onchange();

    })();

</script>

有人帮忙吗？

4

2 回答 2

3

尝试使用op.innerText = bOptions[_val][i];旧版本的 IE，因为它不支持op.text

更改您的代码，例如

if(IE8)// use user_agent to get browser version and browser type
{
    op.innerText = bOptions[_val][i];
}
else
{
    op.text = bOptions[_val][i];
}

阅读浏览器兼容性和innerText

于 2013-10-03T05:47:17.713 回答
1

这是一个可以解决您的问题的链接： http ://jehiah.cz/a/firing-javascript-events-properly

于 2013-10-03T05:40:23.883 回答