Jquery dependent dropdown doesn't work in IE
I have a 3 dropdowns: countries, states, and citi开发者_运维问答es.
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
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.
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)
精彩评论