Question

我有以下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之间的区别是什么。

Answer 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()属性。

Answer 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（）。

Answer 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作为此字段的值提交，并在用户选择21时提交Contact，依此类推。

如果您的服务器以不同的格式返回URL，则可以自由修改上述代码。

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

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

4 个答案: