Jquery dependent dropdown doesn't work in IE

Posted by earlyriser on Stack Overflow See other posts from Stack Overflow or by earlyriser
Published on 2010-03-17T18:09:11Z Indexed on 2010/03/17 18:11 UTC
Read the original article Hit count: 520

Filed under:
|

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:

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

The cities loaded page is similar to:

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

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>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about AJAX