Jquery Dropdown Cascade Example - Jquery
How to create a simple jquery cascading dropdown?
Snippet Code
Rate this page :
|
[ 0 votes]
|
This jquery code which creates a cascade dropdown for second value which depends on first dropdown value.
<script type='text/javascript'>
jQuery(function($) {
var districts = {
'Tamilnadu': ['Chennai', 'Coimbatore', 'Madurai'],
'Andhra': ['Anantapur','Chittoor','Kadapa'],
'Kerala': ['Alappuzha','Ernakulam','Kannur'],
'Karnataka': ['Chitradurga','Kolar'],
'Gujarat': ['Ahmedabad','Amreli','Banaskantha'],
'Madhya Pradesh': ['Bhopal'],
'Maharashtra': ['Vidarbha','Konkan'],
}
var $districts = $('#district');
$('#state').change(function () {
var state = $(this).val(), lcns = districts[state] || [];
var msg = $.map(lcns, function(lcn){
return '<option value="' + lcn + '">' + lcn + '</option>'
}).join('');
$districts.html(msg)
});
});
</script>
<b>State: </b>
<select id="state" name="state">
<option>--SELECT--</option>
<option>Tamilnadu</option>
<option>Andhra</option>
<option>Kerala</option>
<option>Karnataka</option>
<option>Gujarat</option>
<option>Madhya Pradesh</option>
<option>Maharashtra</option>
</select>
</br></br>
<b>Districts : </b>
<select id="district" name="district"></select>
