pure Jquery and ajax cascading dropdown lists

Hi,

I’m trying to create 2 dropdown lists name: states and cities, states dropdown list gets its data from database and when a state is selected the other dropdown list shows the related cities of that state, it’s pretty simple, but I don’t want to use ajax
controls like ajax scriptmanager and updatepanel, I want to write it in jquery inside my aspx page.

Please help me on this.

Thanks in advance :) 

Hi,

First Load all jquery library

then use the below code

$.ajax({
        type: "POST",
        url: "/Global/GetState/",
        contentType: "application/json",              
        dataType: "json",
        success: function (state) {
        $("#stateDropdown").empty();
        $.each(state, function () {
            $("#stateDropdown").append($("<option>                                                      
               </option>").val(this['StateId']).html(this['StateName']));
        });
     }
  });


$( "#CityDropdown").change(function() {
  $.ajax({
        type: "POST",
        url: "/Global/GetCity/",
        data:{StateId: $( "#StateDropdown").val()},
        contentType: "application/json",              
        dataType: "json",
        success: function (city) {
        $("#CityDropdown").empty();
        $.each(city, function () {
            $("#CityDropdown").append($("<option>                                                      
               </option>").val(this['cityID']).html(this['CityName']));
        });
     }
  });
});

 

Leave a Reply