Nov 26
Dynamically updating selectlist using Jquery and Ajax
Jquery, PHP, ajax, html, javascript, rails Add comments
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").live("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
