JQuery popup does not work in IE

Question

I have 3 drop-down lists: countries, states and cities.

States and cities are dependent on the previous form and are downloaded via AJAX.

In Firefox and Chrome, everything is fine, but in IE (8 in my case), when I select the state, the cities pop-up menu does not load. This is similar to the fact that IE does not detect changes. This is not a download problem because I tested it with a simple notification window.

Any help would be really appreciated.

The loaded status page is similar to:

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

The loaded cities page is similar to:

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

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 .change with .click

Answer 1

It is counter-intuitive, but you need to use .click() instead of .change() . Internet Explorer does not fire the change event until the drop-down menu loses focus, while other browsers fire change every time the value changes.

See this related question: Getting jQuery to recognize .change () in IE .

Answer 2

This is probably because you are loading state after starting the original javascript (and throwing the .change () event.
Use form

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

to capture the event when selected. EDIT: enter the rest of the code

alternative according to note: add event when you add SELECT:

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

and where you add select:

 AddSelectStateEvent(); 

NOTE. Fixed syntax error in the first version with .live (missing comma)