Jquery dependent dropdown doesn't work in IE
- by earlyriser
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>
