Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

onchange on dropdownlist

Tags:

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.

like image 780
Nick Kahn Avatar asked Apr 19 '10 15:04

Nick Kahn


People also ask

How do I use OnChange for dropdown?

The HTML Select DropDownList has been assigned a jQuery OnChange event handler. When an item is selected in the HTML Select DropDownList, the jQuery OnChange event handler is executed within which the Text and Value of the selected item is fetched and displayed in JavaScript alert message box.

How do you attach a single OnChange event with multiple dropdowns?

Best procedure for cases like this would be, to add a common class to all the dropdowns for which you want to call the function on change. For ex: add 'trigger-change' class for all your required dropdowns. Then below bind event should work perfect for you. $('form select.

Can I use OnChange in select tag?

Yes. Add an onChange property to the first select, then use it to call a javascript function you have written elsewhere.


2 Answers

$(this).parent("select").attr("id");
like image 45
derek Avatar answered Sep 22 '22 00:09

derek


$("#state").change(function(){
    //on-change code goes in here.
    //variable "this" references the state dropdown element
});
like image 55
Graza Avatar answered Sep 18 '22 00:09

Graza