onchange on dropdownlist

Question

my question is continuation of what i have asked see the link. Load Country/State/City

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.

Append latest code:

<select id="country"  onchange="getStateByCountryId()"></select> <br />
<select id="state"></select>  <br />


$(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('<option>Select a Country</option>'); 

             for (i = 0; i < returnedArray.length; i++) {
                  country.append("<option value='" + returnedArray[i].Id + "'>" + returnedArray[i].Name + "</option>");
             }


         }
     };
     $.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 < returnedArray.length; ++i) {
                     state.append("<option value='" + returnedArray[i].Id + "'>" + returnedArray[i].Name + "</option>");
                 }
             }
         };
         $.ajax(options);
     });
 }

but does not populate? the way i am doing is that how you suppose to do?

thanks.

score 25 · Accepted Answer · answered Apr 19 '10 at 15:26

25

$("#state").change(function(){
    //on-change code goes in here.
    //variable "this" references the state dropdown element
});

answered Apr 19 '10 at 15:26

Graza

5,010
6
32
37

how do i get the id of a parent (country) dropdown element? – Nick Kahn Apr 19 '10 at 15:31
1

"country" is not a "parent" in the HTML above, it's simply another element. The above code, but replacing `#state` with `#country` would get what you want. Or am I misunderstanding? Do you want the "previous" element instead? – Graza Apr 19 '10 at 15:42

score 3 · Answer 2 · edited Mar 20 '14 at 11:25

3

$(this).parent("select").attr("id");

edited Mar 20 '14 at 11:25

Taryn

242,637
56
362
405

answered Apr 19 '10 at 15:36

derek

4,826
1
23
26

under which – derek Apr 19 '10 at 15:46
let me try and get back to you. – Nick Kahn Apr 19 '10 at 15:48
here is the update i get the value by doing $("#country").val(); okay... when the page load very first time it populates all my country but when i change to other country it does not fire for the first time but it does fire (onchange event) when i change the country second time... why is it? – Nick Kahn Apr 19 '10 at 18:21
i have append the latest code, please have a look at it. - thanks. – Nick Kahn Apr 19 '10 at 18:53
by populating the dropdown using ajax, it's selected value is not getting saved in the viewstate. Perhaps you could pass the selected value in the querystring on postback so you can re-select the value on page load. – derek Apr 19 '10 at 19:57

onchange on dropdownlist

2 Answers2

Linked