jquery用json数据填充下拉列表答案

【问题标题】：jquery fill dropdown with json datajquery用json数据填充下拉列表
【发布时间】：2011-05-10 15:11:43
【问题描述】：

我有以下 jQuery 代码。我能够从服务器[{"value":"1","label":"xyz"}, {"value":"2","label":"abc"}] 获取以下数据。我如何迭代它并用id=combobox填充选择框

$.ajax({
    type: 'POST',
    url: "<s:url value="/ajaxMethod.action"/>",
    data:$("#locid").serialize(),
    success: function(data) {
        alert(data.msg);

                //NEED TO ITERATE data.msg AND FILL A DROP DOWN
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    },
    dataType: "json"
});

还有使用.ajax和$.getJSON有什么区别。

【问题讨论】：

你使用的是什么版本的 jQuery，user373201？

标签： jquery json

【解决方案1】：

这应该可以解决问题：

$($.parseJSON(data.msg)).map(function () {
    return $('<option>').val(this.value).text(this.label);
}).appendTo('#combobox');

这是ajax 和getJSON 之间的区别（来自jQuery documentation）：

[getJSON]是一个简写的Ajax函数，相当于：
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

编辑：需要明确的是，部分问题是服务器的响应返回了一个看起来像这样的 json 对象：

{
    "msg": '[{"value":"1","label":"xyz"}, {"value":"2","label":"abc"}]'
}

...所以msg 属性需要使用$.parseJSON() 手动解析。

【讨论】：

我在这行 $(data .msg).map(function () {
啊，当然。 data.msg 只是一个字符串，所以需要解析成一个 JS 对象。我已经更新了上面的代码 sn-p 来执行此操作，但您可能应该修复服务器的响应以实际直接返回“msg”对象，而不是先将其编码为字符串。
@namuol 我知道这是一个旧的 Q/A，显然你已经得到了很多支持，但是当我创建一个 JSON 对象、解析并推送数据到一个新数组。它看起来类似于您在编辑中添加的内容，除了我在label 中使用了人名，所以它就像Doe, John Q。它在数组第 1 行第 2 场上给了我一个错误，我认为它描述为。如果我只是简单地做了$.each(dataArray, function () { $("#combobox").append($("<option></option>").val(this['value']).html(this['label'])); });，它就可以完美地工作。所以我想知道为什么parseJSON 不起作用。名字，也许？

【解决方案2】：

如果你的数据已经是数组形式，使用jQuery真的很简单：

 $(data.msg).each(function()
 {
     alert(this.value);
     alert(this.label);

     //this refers to the current item being iterated over

     var option = $('<option />');
     option.attr('value', this.value).text(this.label);

     $('#myDropDown').append(option);
 });

.ajax() 比.getJSON() 更灵活——一方面，getJson 专门针对检索 json 的 GET 请求； ajax() 可以请求任何动词以取回任何内容类型（尽管有时这没有用）。 getJSON 在内部调用 .ajax()。

【讨论】：

只是一个建议。创建所有 html 并将其存储在一个变量中。完成后，使用 .html() 一次添加所有 html。如果您有很多选择，它将加快这个过程。
感谢重播和评论。我在此行 $(data.msg).each(function( ){
我假设您的数据来自 data.msg 字段。如果这就是返回的所有数据，您只需执行$(data).each。
我看到服务器在 json 字符串的开头和结尾放了一个双引号。实际返回的是 "[{"value":"1","label":"xyz - abc"}]"。是否有 js/jquery 方法可以转换为 json 或者我必须使用字符串替换来删除开头和结尾的引号

【解决方案3】：

这是一个代码示例，它尝试从/Ajax/_AjaxGetItemListHelp/ URL 获取 AJAX 数据。成功后，它会使用 id = OfferTransModel_ItemID 从下拉列表中删除所有项目，然后根据 AJAX 调用的结果用新项目填充它：

if (productgrpid != 0) {    
    $.ajax({
        type: "POST",
        url: "/Ajax/_AjaxGetItemListHelp/",
        data:{text:"sam",OfferTransModel_ItemGrpid:productgrpid},
        contentType: "application/json",              
        dataType: "json",
        success: function (data) {
            $("#OfferTransModel_ItemID").empty();

            $.each(data, function () {
                $("#OfferTransModel_ItemID").append($("<option>                                                      
                </option>").val(this['ITEMID']).html(this['ITEMDESC']));
            });
        }
    });
}

返回的 AJAX 结果应返回编码为 AJAX 数组的数据，其中每个项目包含 ITEMID 和 ITEMDESC 元素。例如：

{
    {
        "ITEMID":"13",
        "ITEMDESC":"About"
    },
    {
        "ITEMID":"21",
        "ITEMDESC":"Contact"
    }
}

OfferTransModel_ItemID 列表框填充了上述数据，其代码应如下所示：

<select id="OfferTransModel_ItemID" name="OfferTransModel[ItemID]">
    <option value="13">About</option>
    <option value="21">Contact</option>
</select>

当用户选择About时，表单提交13作为该字段的值，当用户选择Contact时提交21等等。

如果您的服务器以不同格式返回 URL，请随意修改上述代码。

【讨论】：

能否请您描述您的答案以及发布代码？就目前而言，这并不是特别有用。
外部括号应该是方括号 [, ] 因为它是一个数组

【解决方案4】：

在大多数公司中，他们需要一个通用功能来为所有页面提供多个下拉列表。只需调用函数或传递您的 (DropDownID,JsonData,KeyValue,textValue)

    <script>

        $(document).ready(function(){

            GetData('DLState',data,'stateid','statename');
        });

        var data = [{"stateid" : "1","statename" : "Mumbai"},
                    {"stateid" : "2","statename" : "Panjab"},
                    {"stateid" : "3","statename" : "Pune"},
                     {"stateid" : "4","statename" : "Nagpur"},
                     {"stateid" : "5","statename" : "kanpur"}];

        var Did=document.getElementById("DLState");

        function GetData(Did,data,valkey,textkey){
          var str= "";
          for (var i = 0; i <data.length ; i++){

            console.log(data);


            str+= "<option value='" + data[i][valkey] + "'>" + data[i][textkey] + "</option>";

          }
          $("#"+Did).append(str);
        };    </script>

</head>
<body>
  <select id="DLState">
  </select>
</body>
</html>

【讨论】：