javascript - Load list based on value json request -


i ran little problem while doing this. have script loads statelist on page load. great right, cascading countylist whenever state changed sends ajax call server , gets countylist items countylist dropdown depending on state. want little different while keeping same functionality. want able state , county on one-click #load. once hit load send ajax call server , state , county name tied load call. here's there problem, can change statelist value state doesnt change countylist @ all. county list null, have open statelist , click on statelist load county list. tried using on load, click, change ect. doesn't work wondering if can me. enough of me talking here code.

$(document).ready(function () {     var $statelist = $("#statelist");      $statelist.change(function () {          var statelist = $statelist[0];         var countylist = $("#countylist");         $.ajax({             type: "get",             cache: false,             url: "getcounties",             data: { "jsonstring": statelist[statelist.selectedindex].value },             success: function (data)             {                 countylist.html(data);             },         });     });         $("#load").click(function () { var orderdetailid = document.getelementbyid("loadorderdetailid");      var statelist = $("#statelist");         $.ajax({             type: "get",             cache: false,             url: "getstate",             data: { "jsonorderint": orderdetailid.value },             success: function (data) {                 {                     statelist.val(data)                 }             }         });         var orderdetailid = document.getelementbyid("loadorderdetailid");         var countyname = $("#countylist");         $.ajax({             type: "get",             cache: false,             url: "getcountyname",             data: { "jsonorderint": orderdetailid.value },             success: function (data) {                 {                     countyname.val(data)                 }             }         }); 

here photo: http://imgur.com/6rtxmsh

your $("#load").click() function not trigger populating countylist. seems unnecessary call 2 ajax methods passing same value. use single call method returns json containing data want.

script

$('#load').click(function () {   var url = '@url.action("getorderdetails")';   var id = $('#loadorderdetailid').val();   var statelist = $('#statelist');   var countylist = $('#countylist');   $.getjson(url, { id: id }, function(data) {     if(data.state != statelist.val()) {       // need repopulate counties       countylist.empty();       $.each(data.countylist, function(index, item) {         countylist.append($('<option></option>').val(item.value).text(item.text));       });       statelist.val(data.state);     }     countylist.val(data.county);   }); }); 

controller

public jsonresult getorderdetails(int id) {   var state = // state value   var county = // city value   var countylist = // value , display text properties of counties   // example   var countylist = db.countys.select(c => new   {     value = c.id,     text = c.name   }   return json(new { state = state, county = county, countylist = countylist }, jsonrequestbehavior.allowget);   } 

Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -