Jquery 依赖的下拉菜单在 IE 中不起作用

Question

我有 3 个下拉菜单:国家/地区、州/省和城市。

州和城市依赖于之前的表单并通过 AJAX 加载。

在 Firefox 和 Chrome 中一切正常，但在 IE(我的例子是 8)中，当我选择一个州时，城市下拉列表不会加载。就像 IE 检测不到变化一样。这不是负载问题，因为我已经用一个简单的警报框进行了测试。

任何帮助将不胜感激。

加载的状态页面类似于:

<select id="woeid_state">
<option value="1">Alabama</option>
<option value="2">Florida</option>
</select>

城市加载页面类似于:

<select id="woeid_town">
<option value="100">Miami</option>
<option value="101">Orlando</option>
</select>

JS

$(document).ready(function()
 {
    function loadStates( parent_woeid )
    {
        $('#states').load("<?php echo $states_page?>"+parent_woeid);
        return false;           
    }

    function loadCities( parent_woeid )
    {
        $('#towns').load("<?php echo $cities_page;?>/admin1/"+parent_woeid);
        return false;           
    }   

    $("#woeid_country").change(function()
    {
        //alert("I am an alert box");
        var country = $("select#woeid_country").val();
        loadStates ( country);
    });

    $("#states").change(function()
    {
        //alert("I am an alert box");

        var admin1 = $("select#woeid_state").val();
        loadCities ( admin1 );
    }); 

});     

形式:

            <form class="ordinary_form" method="post" action="">
                <label>Country</label>

                <select name="woeid_country" id="woeid_country">
                                        <option value="23424975">United Kingdom</option>
                                        <option value="23424977">United States</option>
                                        <option value="23424979">Uruguay</option>
                                        <option value="23424980">Uzbekistan</option>
                                        <option value="23424907">Vanuatu</option>
                                        <option value="23424982">Venezuela</option>
                                        <option value="23424984">Vietnam</option>
                                    </select>

                <label>State/Province</label>
                <div id="states"></div>

                <label>City</label>
                <div id="towns"></div>
        </form>

更新:使用 JQuery 1.3

解决方案:由 Daniel 带来:将 .change 替换为 .click

Answer 1

这是违反直觉的，但您需要使用 .click() 而不是 .change()。在下拉菜单失去焦点之前，Internet Explorer 不会触发 change 事件，而其他浏览器每次值更改时都会触发 change 事件。

请参阅相关的 Stack Overflow 问题:Getting jQuery to recognise .change() in IE .