如何在 jQuery 中使用 json 数据填充下拉列表？

发布于 2024-08-29 08:26:07 字数 3063 浏览 4 评论 0原文

我正在开发一个国家/地区级联下拉列表...我根据 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);
        }
    });
    return false;
}

警报给出了这个，

{"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"}]}

我的 aspx 页面有这个，

<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>

关于如何填充 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\"},{\"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\"}]}"}

原文

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\"}]}"}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

温柔戏命师 2024-09-05 08:26:07

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" : "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);
    });

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);
    });

回复收藏 0 原文

话少心凉 2024-09-05 08:26:07

//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);
}

//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);
}

回复收藏 0 原文

人│生佛魔见 2024-09-05 08:26:07

要使用 JSON 填充 ComboBox，您可以考虑使用： jqwidgets组合框也是如此。

回复收藏 0 原文

甜警司 2024-09-05 08:26:07

试试这个，它对我有用

$(document).ready(function(e){
        $.ajax({
           url:"fetch",
           processData: false,
           dataType:"json",
           type: 'POST',
           cache: false,
           success: function (data, textStatus, jqXHR) {
                        
                         $.each(data.Table,function(i,tweet){
			   $("#list").append('<option value="'+tweet.actor_id+'">'+tweet.first_name+'</option>');
			});}
        });
    });

try this one its worked for me

$(document).ready(function(e){
        $.ajax({
           url:"fetch",
           processData: false,
           dataType:"json",
           type: 'POST',
           cache: false,
           success: function (data, textStatus, jqXHR) {
                        
                         $.each(data.Table,function(i,tweet){
			   $("#list").append('<option value="'+tweet.actor_id+'">'+tweet.first_name+'</option>');
			});}
        });
    });

回复收藏 0 原文

~没有更多了~