Jquery ajax Selectbox
index.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("select[name='country']").change(function(){
var optionValue = jQuery("select[name='country']").val();
jQuery.ajax({
type: "GET",
url: "city.php",
data: "country="+optionValue+"&status=1",
beforeSend: function(){ jQuery("#ajaxLoader").show(); },
complete: function(){ jQuery("#ajaxLoader").hide(); },
success: function(response){
jQuery("#cityAjax").html(response);
jQuery("#cityAjax").show();
}
});
});
});
</script>
Countries:
<select name="country">
<option value="">Please Select</option>
<option value="1">Nepal</option>
<option value="2">India</option>
<option value="3">China</option>
<option value="4">USA</option>
<option value="5">UK</option>
</select>
<div id="ajaxLoader" style="display:none"><img src="../ajax-loader.gif" alt="loading..."></div>
<div id="cityAjax" style="display:none">
<select name="city">
<option value="">Please Select</option>
</select>
</div>
city.php
<?php
$country = $_GET['country'];
if(!$country) {
return false;
}
$cities = array(
1 => array('Kathmandu','Bhaktapur','Patan','Pokhara','Lumbini'),
2 => array('Delhi','Mumbai','Kolkata','Bangalore','Hyderabad','Pune','Chennai','Jaipur','Goa'),
3 => array('Beijing','Chengdu','Lhasa','Macau','Shanghai'),
4 => array('Los Angeles','New York','Dallas','Boston','Seattle','Washington','Las Vegas'),
5 => array('Birmingham','Bradford','Cambridge','Derby','Lincoln','Liverpool','Manchester')
);
$currentCities = $cities[$country];
?>
City:
<select name="city">
<option value="">Please Select</option>
<?php
foreach($currentCities as $city) {
?>
<option value="<?php echo $city; ?>"><?php echo $city; ?></option>
<?php
}
?>
</select>
