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>

更新：usign JQuery 1.3

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

Answer 1

这是反直觉的，但你需要使用.click()代替.change() Internet Explorer不火的change ，直到下拉列表失去焦点事件，而其他浏览器火change ，每次变化值。

请参阅以下相关的Stack Overflow问题： 让jQuery识别IE中的.change（） 。

Answer 2

这可能是因为您在原始javascript运行之后加载了状态（并分配了.change（）事件。
使用形式

$("select#woeid_state").live('change', function() {
    var admin1 = $("select#woeid_state option:selected").val(); 
    loadCities ( admin1 ); 
});

捕获所选事件。 编辑：放入其余的代码

按照注释的替代方法：添加SELECT时添加事件：

function AddSelectStateEvent()
{
$("select#woeid_state").change(function() { 
    var admin1 = $("select#woeid_state option:selected").val();  
    loadCities ( admin1 );  
}); 
};

以及添加选择的位置：

AddSelectStateEvent();

注意：使用.live（缺少逗号）修复了第一个选项中的语法错误