Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
174 views
in Technique[技术] by (71.8m points)

How to populate a dropdownlist with json data in jQuery?

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"}]}"}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
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);
    });    

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...