Jquery dependent dropdown doesn't work in IE

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

if you duplcate the id please make it unique

Answer 2

This is likely because you load the state after the original javascript runs (and assigns the .change() event.
Use the form of

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

to capture the event on the select. EDIT: Put in the rest of the code

alternative as per note: add the event when you add the SELECT:

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

and where you add the select:

AddSelectStateEvent();

NOTE:Fixed a syntax error in first option with .live (missing comma)

Answer 3

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.