JQuery使用JSON数据填充DropDownList

时间:2013-09-28 03:28:03

标签: jquery json drop-down-menu

假设我从后端服务层返回了这些数据:

[“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.
});

我看了this thread,但它有对象,而不仅仅是数组。我应该使用parseJSON还是getJSON

提前致谢!

6 个答案:

答案 0 :(得分:13)

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的方式对我来说是新的,而且更优雅。

答案 1 :(得分:8)

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

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

答案 2 :(得分:2)

这不是正确的JSON,它必须是这种风格:

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

您可以使用该示例来回复您:

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

答案 3 :(得分:1)

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

答案 4 :(得分:0)

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

答案 5 :(得分:-3)

对我来说,这个有用了。

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