JQuery 用 JSON 数据填充 DropDownList

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19062900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 23:06:54  来源:igfitidea点击:

JQuery fill DropDownList with JSON data

jqueryjsondrop-down-menu

提问by Mr. C

Let's say I have this data returned from a backend service layer:

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

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

[“2”、“3”、“7”、“14”]

First question. Is this considered valid JSON data? Json.orgsays it is, but I cannot find any references to it on Google, SO, etc...

第一个问题。这被认为是有效的 JSON 数据吗?Json.org说是的,但我在 Google、SO 等上找不到任何对它的引用......

An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

值的有序列表。在大多数语言中,这被实现为数组、向量、列表或序列。

I want to be able to take these values and add them to an already existing DropDownList object OnLoad using JQuery.

我希望能够获取这些值并使用 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.
});

I took a look at this thread, but it has objects, not just an array. Should I use parseJSONversus getJSON?

我看了一下这个线程,但它有对象,而不仅仅是一个数组。我应该使用parseJSONvsgetJSON吗?

Thanks in advance!

提前致谢!

回答by Blaise

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

Please also take a look at Mr. C's solution:

还请看一下C先生的解决方案:

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

His way of manipulating options is new to me, and more elegant.

他操纵options的方式对我来说是新的,而且更优雅。

回答by Mr. C

My solution was based off of Blaise'sidea.

我的解决方案基于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)
          );
     });
 });

回答by Rodion Shotskiy

This is not correct JSON, it must be this style:

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

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

You could use that sample to procceed you response:

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

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

回答by Deepak Kothari

This is the HiddenField declaration,which is useful to Store The JSON String

这是 HiddenField 声明,用于存储 JSON 字符串

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

This is the Dropdownlist declaration

这是下拉列表声明

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

These lines will initialize Hiddenfield value with the sorted list(Assume that list contains the key value pairs in sorted order) which is then serialized using JSON serializer

这些行将使用排序列表初始化 Hiddenfield 值(假设该列表包含按排序顺序的键值对),然后使用 JSON 序列化程序对其进行序列化

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

These lines will use Elements of JSON String One by one and populate the dropdown with Values.

这些行将一一使用 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)
        );
        });
   }

回答by Botlhale Jonathan Matlou

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

回答by Sushama Pradhan

For me, this one worked.

对我来说,这个有效。

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