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
Post a Comment