title: onchange on dropdownlist
body: <p>my question is continuation of what i have asked see the link.
  <a href="https://stackoverflow.com/questions/2640001/load-country-state-city">Load Country/State/City</a></p>
  
  <p>i have expand to load my drop downs list from db and i just need a way to wire onchange method in my first dropdownlist and second, please see the code. appreciate any help.</p>
  
  <p><strong><em>Append latest code:</em></strong></p>
  
  <pre><code>&lt;select id="country"  onchange="getStateByCountryId()"&gt;&lt;/select&gt; &lt;br /&gt;
  &lt;select id="state"&gt;&lt;/select&gt;  &lt;br /&gt;
  
  
  $(document).ready(function() { 
       var options = {
           type: "POST",
           url: "SearchPage.aspx/LoadCountry",
           data: "{}",
           contentType: "application/json; charset=utf-8",
           dataType: "json",
  
           success: function(msg) {
  
               var returnedArray = msg.d;
               country = $("#country"); 
                country.append('&lt;option&gt;Select a Country&lt;/option&gt;'); 
  
               for (i = 0; i &lt; returnedArray.length; i++) {
                    country.append("&lt;option value='" + returnedArray[i].Id + "'&gt;" + returnedArray[i].Name + "&lt;/option&gt;");
               }
  
  
           }
       };
       $.ajax(options);
   });
  
  
  function getStateByCountryId() {
  
       $("#country").change(function() 
       { 
           var _selected = $("#country").val();
           var options = 
           {
               type: "POST",
               url: "SearchPage.aspx/StateBy",
               data: "{'countryId':'" + _selected + "'}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
  
               success: function(msg) {
                  $('#state').empty(); 
                   var returnedArray = msg.d;
  
  
                   state = $("#state");
                   for (var i = 0; i &lt; returnedArray.length; ++i) {
                       state.append("&lt;option value='" + returnedArray[i].Id + "'&gt;" + returnedArray[i].Name + "&lt;/option&gt;");
                   }
               }
           };
           $.ajax(options);
       });
   }
  </code></pre>
  
  <p>but does not populate? the way i am doing is that how you suppose to do? </p>
  
  <p>thanks.</p>