Dynamically updating selectlist using Jquery and Ajax

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.

   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
     state_id = $("#states").val();
       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 */
 <div id="state_list">
   <select id="states">
 <div id="city_list">
   <select id="cities">
   <option value="1">aa</option>
   <option value="2">aaa</option>

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>

I have updated source code http://github.com/amardaxini/Ajax-Demo

1 comments On Dynamically updating selectlist using Jquery and Ajax

  • Replace Line 5
    Since .live() is depreciated.
    Might help someone in future! Cheers 🙂

Leave a reply:

Your email address will not be published.

Site Footer