用JSON数据填充JQuery下拉列表

Question

假设我从后端服务层得到了这些数据：

["2", "3", "7", "14"]

第一个问题是，这是否被视为有效的JSON数据？ Json.org表示它是，但我在Google、SO等网站上找不到任何相关参考资料...

一个值列表。在大多数语言中，这被实现为数组、向量、列表或序列。

我想用jQuery将这些值添加到已存在的DropDownList对象OnLoad中。

$.getJSON("http://www.example.com/path-to-get-data", function(data) { 
  //iterate through each object and add it to the list.
  //ideally, the key and value (string to display to the end user) would be the same.
});

我看了一下这个帖子，但它有对象，而不仅仅是一个数组。 我应该使用parseJSON还是getJSON？

提前致谢！

- Mr. C

---

我认为这不是有效的，有效的JSON应该像这样：{"key:“2”, "key":“3”, "key":“7”, "key":“14”}。 - Satya

$.parseJSON('["2", "3", "7", "14"]')将返回一个数组。最好使用getJSON并迭代遍历数组中的每个项目，并将其添加到您的对象中。 - rzr

Answer 1

var arr = [ 2, 3, 7, 14];
$.each(arr, function(index, value) {
     ('#myselect').append($('<option>').text(value).attr('value', index));
});

请您也看一下C先生的解决方案：

$('<option></option>').val(item).html(item)

他处理 option 的方式对我来说是新的，而且更优雅。

- Blaise

---

它抛出了“对象不支持 .append”错误。 - Kurkula

你使用的jQuery版本是多少？你使用的浏览器是什么？ - Blaise

$.append 从早期版本就可用。你的 DOM 选择器（即 $('#myselect') 部分）是否正确？ - Blaise

这个答案第三行有一个小错别字，我已经发现了。在('#myselect).append($('<option>').text(value).attr('value', index));前面缺少了$符号。 这非常有帮助，谢谢。 - Ian D. Rossi

Answer 2

我的解决方案基于Blaise的想法。

//populate the Drop Down List
$.getJSON("http://www.example.com/api/service", function (data) {
     $.each(data, function (index, item) {
         $('#dropDownList').append(
              $('<option></option>').val(item).html(item)
          );
     });
 });

- Mr. C

Answer 3

这不是正确的JSON格式，必须采用如下样式：

{"0": "2", "1" : "3", "2" : "7", "3" : "14"}

你可以使用这个示例来处理你的响应：

var response = "[2, 3, 7, 14]";
eval("var tmp = " + response); 
console.log(tmp); 

- Rodion Shotskiy

Answer 4

这是一个HiddenField声明，用于存储JSON字符串。

   <asp:HiddenField ID="hdnBankStatus" runat="server" />

这是下拉列表声明。

   <select id="optStatus" name="optStatus" runat="server">
        </select> 

这些代码将使用已排序的列表（假设该列表包含按顺序排列的键值对）来初始化Hiddenfield的值，然后使用JSON序列化器进行序列化。

   sl = new SortedList();
   hdnBankStatus.Value = jsonSerialiser.Serialize(sl);

这些行将逐一使用JSON字符串元素，并用值填充下拉列表。

   $(document).ready(function () {  

   var myOptions = $.parseJSON($('#hdnBankStatus').val());
        var mySelect = $('#optStatus');
        $.each(myOptions, function (val, text) {
            mySelect.append(
    $('<option></option>').val(text).html(val)
        );
        });
   }

- Deepak Kothari

Answer 5

 var arr = [ 2, 3, 7, 14];
 var dropdown = ('#myselect');
 dropdown.empty();
 dropdown.append($('<option value=''>--Please Select--</option>'));
 $.each(arr, function(index, value) {
 dropdown.append($('<option value='+index+'>'+value+'</option>'));
 });`

- Botlhale Jonathan Matlou

---

这应该可以。 - Botlhale Jonathan Matlou

Answer 6

对我来说，这个可以工作。

$("#ddlCaseType").append("<option>" + txt + "</option>");

- Sushama Pradhan

---

$("#ddlCaseType").append("<option>" + txt + "</option>"); 可以将一个新的选项添加到 id 为 ddlCaseType 的下拉列表中。 - Sushama Pradhan