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

РЕШЕНИЕ: принес Даниил: замените .change на .click

Answer 1

Это нелогично, но вам нужно использовать .click() вместо .change(). Internet Explorer не запускает событие change до тех пор, пока раскрывающийся список не потеряет фокус, в то время как другие браузеры запускают change при каждом изменении значения.

См. Этот связанный вопрос переполнения стека: Получение jQuery для распознавания .change () в IE .

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 (пропущена запятая)