jquery - Data binding for multiple dropdownlists for default shown values -
i have 3 dropdownlists populated(cascading). country, city , factory. data binded correctly 3 dropdownlists.
the problem when select country, relevant cities binded correctly city ddl first value got selected city ddl(default shown value), factory ddl doesn't show relevant factories. if choose element city ddl , again if click on default shown element of city ddl works fine. here script
<script> //for ddls var citydropdown = $("#selectedcity"); $('#selectedcountry').change(function () { $.ajax({ url: '@url.action("fillcity", "godown")', type: "get", datatype: "json", data: { country: $(this).val() }, success: function (cities) { citydropdown.empty(); $.each(cities, function (i, city) { citydropdown.append($('<option></option>').val(city.cityid).html(city.cityname)); }); } }); }) var factorydropdown = $("#selectedfactory"); $('#selectedcity').change(function () { $.ajax({ url: '@url.action("fillfactory", "godown")', type: "get", datatype: "json", data: {city: $(this).val() }, success: function (factories) { factorydropdown.empty(); $.each(factories, function (i, factory) { factorydropdown.append($('<option></option>').val(factory.factoryid).html(factory.factoryname)); }); } }); }) </script>
all appreciated. in advance!
you need trigger .change()
event of cities dropdown list once populate cities, associated factories loaded
$('#selectedcountry').change(function () { $.ajax({ .... success: function (cities) { citydropdown.empty(); $.each(cities, function (i, city) { citydropdown.append($('<option></option>').val(city.cityid).html(city.cityname)); }); $('#selectedcity').trigger('change'); // add } }); })
however unnecessarily making ajax call server populate factories city user may not interested in. better add default "please select" option cities dropdownlist user can select city , populate associated factories.
$('#selectedcountry').change(function () { $.ajax({ .... success: function (cities) { citydropdown.empty(); citydropdown.append($('<option></option>').val('').html('please select')); // add $.each(cities, function (i, city) { citydropdown.append($('<option></option>').val(city.cityid).html(city.cityname)); }); } }); })
Comments
Post a Comment