jQuery数据填充下拉列表

我有以下jQuery代码。 我可以从服务器[{"value":"1","label":"xyz"}, {"value":"2","label":"abc"}] 。 我如何迭代这个，并填充id=combobox的selectid=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'); 

以下是jQuery文档中 ajax和getJSON的区别：

[getJSON]是一个简写的Ajax函数，相当于：

 $.ajax({ url: url, dataType: 'json', data: data, success: callback }); 

---

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

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

…因此，需要使用$.parseJSON()手动parsingmsg属性。

Answer 2

如果你的数据已经是数组forms了，那么使用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专门作为GET请求来检索json; ajax（）可以请求任何动词来取回任何内容types（尽pipe有时这是没有用的）。 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> 

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

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