Menu
I am developing a country state cascading dropdown list... I returned JSON result based on countryId but I don't know how to populate/fill it in a new dropdown listbox...
Here is what I am using,
function getstate(countryId) { $.ajax({ type: "POST", url: "Reg_Form.aspx/Getstates", data: "{'countryId':" + (countryId) + "}", contentType: "application/json; charset=utf-8", global: false, async: false, dataType: "json", success: function(jsonObj) { alert(jsonObj.d); } }); return false; } And alert gave this,
{"Table" : [{"stateid" : "2","statename" : "Tamilnadu"}, {"stateid" : "3","statename" : "Karnataka"}, {"stateid" : "4","statename" : "Andaman and Nicobar"}, {"stateid" : "5","statename" : "Andhra Pradesh"}, {"stateid" : "6","statename" : "Arunachal Pradesh"}]} And my aspx page has this,
<td> <asp:DropDownList ID="DLCountry" runat="server" CssClass="dropDownListSkin" onchange="return getstate(this.value);"> </asp:DropDownList> </td> <td> <asp:DropDownList ID="DLState" runat="server" CssClass="dropDownListSkin"> </asp:DropDownList> </td> Any suggestion on how to fill DLState dropdown...
EDIT:
When I inspected through firebug I got the response for my AJAX post,
{"d":"{\"Table\" : [{\"stateid\" : \"2\",\"statename\" : \"Tamilnadu\"},{\"stateid\" : \"3\",\"statename\" : \"Karnataka\"},{\"stateid\" : \"4\",\"statename\" : \"Andaman and Nicobar\"},{\"stateid\" : \"5\",\"statename\" : \"Andhra Pradesh\"},{\"stateid\" : \"6\",\"statename\" : \"Arunachal Pradesh\"},{\"stateid\" : \"7\",\"statename\" : \"Assam\"},{\"stateid\" : \"8\",\"statename\" : \"Bihar\"},{\"stateid\" : \"9\",\"statename\" : \"Dadra and N. Haveli\"},{\"stateid\" : \"10\",\"statename\" : \"Daman and Diu\"},{\"stateid\" : \"11\",\"statename\" : \"Delhi\"},{\"stateid\" : \"12\",\"statename\" : \"Goa\"},{\"stateid\" : \"13\",\"statename\" : \"Gujarat\"},{\"stateid\" : \"14\",\"statename\" : \"Haryana\"},{\"stateid\" : \"15\",\"statename\" : \"Himachal Pradesh\"},{\"stateid\" : \"16\",\"statename\" : \"Jammu and Kashmir\"},{\"stateid\" : \"17\",\"statename\" : \"Kerala\"},{\"stateid\" : \"18\",\"statename\" : \"Laccadive Islands\"},{\"stateid\" : \"19\",\"statename\" : \"Madhya Pradesh\"},{\"stateid\" : \"20\",\"statename\" : \"Maharashtra\"},{\"stateid\" : \"21\",\"statename\" : \"Manipur\"},{\"stateid\" : \"22\",\"statename\" : \"Meghalaya\"},{\"stateid\" : \"23\",\"statename\" : \"Mizoram\"},{\"stateid\" : \"24\",\"statename\" : \"Nagaland\"},{\"stateid\" : \"25\",\"statename\" : \"Orissa\"},{\"stateid\" : \"26\",\"statename\" : \"Pondicherry\"},{\"stateid\" : \"27\",\"statename\" : \"Punjab\"},{\"stateid\" : \"28\",\"statename\" : \"Rajasthan\"},{\"stateid\" : \"29\",\"statename\" : \"Sikkim\"},{\"stateid\" : \"30\",\"statename\" : \"Tripura\"},{\"stateid\" : \"31\",\"statename\" : \"Uttar Pradesh\"},{\"stateid\" : \"32\",\"statename\" : \"West Bengal\"}]}"} 
291
Inside the JavaScript function, first the JSON Array is generated. Then a loop is executed over all the items of the JSON Array and inside the loop, the values of the CustomerId and Name properties of each item is used to create and add HTML Option element to the HTML DropDownList.
var listItems= ""; var jsonData = jsonObj.d; for (var i = 0; i < jsonData.Table.length; i++){ listItems+= "<option value='" + jsonData.Table[i].stateid + "'>" + jsonData.Table[i].statename + "</option>"; } $("#<%=DLState.ClientID%>").html(listItems); Example
<html> <head></head> <body> <select id="DLState"> </select> </body> </html> /*javascript*/ var jsonList = {"Table" : [{"stateid" : "2","statename" : "Tamilnadu"}, {"stateid" : "3","statename" : "Karnataka"}, {"stateid" : "4","statename" : "Andaman and Nicobar"}, {"stateid" : "5","statename" : "Andhra Pradesh"}, {"stateid" : "6","statename" : "Arunachal Pradesh"}]} $(document).ready(function(){ var listItems= ""; for (var i = 0; i < jsonList.Table.length; i++){ listItems+= "<option value='" + jsonList.Table[i].stateid + "'>" + jsonList.Table[i].statename + "</option>"; } $("#DLState").html(listItems); }); 
//javascript //teams.Table does not exist function OnSuccessJSON(data, status) { var teams = eval('(' + data.d + ')'); var listItems = ""; for (var i = 0; i < teams.length; i++) { listItems += "<option value='" + teams[i][0]+ "'>" + teams[i][1] + "</option>"; } $("#<%=ddlTeams.ClientID%>").html(listItems); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
