如何使用jquery中的json数据填充下拉列表？ [英] How to populate a dropdownlist with json data in jquery?

问题描述

我正在开发一个国家级联的下拉列表...我根据 countryId 返回了json结果，但是我不知道如何填充/填充新的下拉列表框...

这是我正在使用的，

  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）; 
} 
}）; 
返回false; 
} 
  

并且警报给了这个，

  {Table：[{stateid：2，statename：Tamilnadu}，
 {stateid：3 statename：Karnataka}，
 {stateid：4，statename：Andaman and Nicobar}，
 {stateid：5，statename 安得拉邦}，
 {stateid：6，statename：阿鲁纳恰尔邦}}} 
  

我的aspx页面有这个，

 < td> 
< asp：DropDownList ID =DLCountryrunat =serverCssClass =dropDownListSkin
 onchange =return getstate（this.value）;> 
< / asp：DropDownList> 
< / td> 
< td> 
< asp：DropDownList ID =DLStaterunat =serverCssClass =dropDownListSkin> 
< / asp：DropDownList> 
< / td>任何有关如何填写 DLState 下拉菜单的建议... 
 
 
 
 编辑： 
 
 
 
当我通过firebug检查我得到对我的ajax帖子的回复，
  {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 \\ \\，\，\，\8 \，\statename\：\Bihar \}，{\stateid \\ 9\ \ Statename的\\：\Dadra和N. Haveli\}，{\stateid\：\10\，\statename\：\Daman and Diu\ }，{\stateid\：\11\，\statename\：\Delhi \}，{\stateid\：\12 \\ \\statename\：\Goa\}，{\stateid\：\13\，\statename\：\古吉拉特邦\\，\状态\：\14 \，\statename \：\Haryana \}，{\stateid \\ 15\，\statename\：\喜马偕尔邦\}，{\stateid\：\16 \，\statename\：\ 查谟和克什米尔，{\stateid\：\17\，\statename\：\喀拉拉邦\，{\stateid\ ：\18\，\statename\：\Laccadive Islands\}，{\stateid\：\19 \，\statename \\ \\：\中央邦\}，{\sta teid\：\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\：\拉贾斯坦邦\ }，{\stateid\：\29\，\statename\：\Sikkim \}，{\stateid\：\30\\ \\，\statename\：\Tripura \}， {\stateid\：\31\，\statename\：\Uttar Pradesh \}，{\stateid\：\32 \ ，\statename\：\West Bengal\}]}} 
  
 
 
解决方案
 
  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）; 
  
 示例 
 < 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：安得拉邦}，
 {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）; 
}）; 
  
 
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\"}]}"}

解决方案
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);
    });    


                        
这篇关于如何使用jquery中的json数据填充下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！