Question

I have a 3 dropdowns: countries, states, and cities.

States and cities are dependent of the previous form and loaded via AJAX.

In Firefox and Chrome everything is ok, but in IE (8 in my case) when I select a state, the cities dropdown isn’t loaded. It is like IE don’t detect the change. It is not a load problem, because I have tested with a simple alert box.

Any help will be really appreciated.

The states loaded page is similar to:

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

The cities loaded page is similar to:

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

The 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 );
    }); 

});     

The form:

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

UPDATE: usign JQuery 1.3

SOLUTION: brought by Daniel: replace the .change for .click

Answer 1

It’s counter-intuitive, but you need to use .click() instead of .change(). Internet Explorer doesn’t fire the change event until the dropdown loses focus, while the other browsers fire change each time the value changes.

See this related Stack Overflow question: Getting jQuery to recognise .change() in IE.