In many web site we have seen that on selecting country,
state or city list is updated.
In this article i am showing how to update children select list on changing parent list.
To do this i am using jquery and ruby on rails.although it will works for almost all languages
For this article, I am updating city list on changing states.
So one state has many cities,and city belongs to state.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#states").on("change",function(){
state_id = $("#states").val();
$.ajax({
type: "GET",
url: "/city_list.xxx",
/*or any server side url which generate citylist for rails
"/states/city_list"or<%= city_list_states_path%> */
data: "state_id="+state_id,
/*here we are passing state_id to server based on that on
he can find out all the city related to that states */
success: function(html){
/*html content response of city_list.xxx */
$("#city_list").html(html);
}
});
});
</script>
</head>
<body>
<div id="state_list">
<select id="states">
<option>a</option>
<option>b</option>
</select>
</div>
<div id="city_list">
<select id="cities">
<option value="1">aa</option>
<option value="2">aaa</option>
</select>
</div>
</body>
</html>
and city_list.xxx gives following html
on processing state id which we have pass as state_id
<select id="cities"> <option value="3">bb</option> <option value="4">bbb</option> </select>
I have updated source code http://github.com/amardaxini/Ajax-Demo
1 comments On Dynamically updating selectlist using Jquery and Ajax
Replace Line 5
$(“#states”).live(“change”,function(){
By
$(“#states”).on(“change”,function(){
Since .live() is depreciated.
Might help someone in future! Cheers 🙂