Chained Drop Down values not changing after first drop down value has been changed

Question

I am Binding the Country list, state list city list to the drop down lists by using json data. My requirement is that based on the country states should be changed. Based on the States, city values should change. Suppose if i select the India first time respective states are coming, But after i change the country name in country drop down new values are not updating in state drop down, I am getting the correct data of states in firebug.

My Jsfile:

$(document).ready(function () {
  bindData();
  BindCountry();
  var DropDown1 = $("#ddlCountry");
  DropDown1.change(function (e) {
    var CountryCode = DropDown1.val();
    if (CountryCode >= 1) {

        GetStates(CountryCode);

    }

  });

 });


 function BindCountry() {

var Dropdown1 = $("#ddlCountry");
$.ajax({
    type: "POST",
    url: location.pathname + "/GetCountry",
    data: "{}",
    contentType: "application/json;charset=utf-8",
    datatype: "json",
    success: function (response) {
        var country = response.d;
        $.each(country, function (index, country) {
            Dropdown1.append('<option value="' + country.CountryCode + '">' + country.Country + '</option>');

        });
    },
    failure: function (msg) {
        alert(msg);

       }

   });

  }


function GetStates(Coun_code) {
    var DdlState = $("#ddlState");
    $.ajax({
    type: "POST",
    url: location.pathname + "/GetStates",
    data: "{'CountryCode':'" + Coun_code + "'}",
    contentType: "application/json;charset=utf-8",
    datatype: "json",
    success: function (response) {
    var state = response.d;
    $.each(state, function (index, state) {
    DdlState.append('<option value="' + state.StateCode + '">' + state.StateName + '</option>');

       });

      },
  failure: function (msg) {

    alert(msg);

    }


    });

}

Is there any Autopost back property like asp.net is here in javascript??

everything seems good,,i am getting correct data...As i mentioned in question it is working fine first time. But after changing the country name second time , the respective changes are not reflecting in remaining 2 dropdowns — Aj_sari

Sachin Sachin · Accepted Answer · 2014-03-29T10:23:18

this might be happening because i have added return false in your countries's section, so remove this.i have not tried this

        $(document).ready(function () {
          bindData();
          BindCountry();
          var DropDown1 = $("#ddlCountry");
          DropDown1.change(function (e) {
            var CountryCode = DropDown1.val();
            if (CountryCode >= 1) {

                GetStates(CountryCode);

            }

          });

         });


         function BindCountry() {

        var Dropdown1 = $("#ddlCountry");
        $.ajax({
            type: "POST",
            url: location.pathname + "/GetCountry",
            data: "{}",
            contentType: "application/json;charset=utf-8",
            datatype: "json",
            success: function (response) {
                var country = response.d;
                $.each(country, function (index, country) {
                    Dropdown1.append('<option value="' + country.CountryCode + '">' + country.Country + '</option>');

                });
            },
            failure: function (msg) {
                alert(msg);

               }

           });
       t
          }


        function GetStates(Coun_code) {
            var DdlState = $("#ddlState");
            $.ajax({
            type: "POST",
            url: location.pathname + "/GetStates",
            data: "{'CountryCode':'" + Coun_code + "'}",
            contentType: "application/json;charset=utf-8",
            datatype: "json",
            success: function (response) {
            var state = response.d;
            $.each(state, function (index, state) {
            DdlState.append('<option value="' + state.StateCode + '">' + state.StateName + '</option>');

               });

              },
          failure: function (msg) {

            alert(msg);

            }


            });
        return false;
        }

    Hope this will work.

Chained Drop Down values not changing after first drop down value has been changed

1 Answers