使用 JQUERY 将包含数据集的 JSON 绑定到下拉列表答案

【问题标题】：Bind JSON containing a dataset, to dropdownlist using JQUERY使用 JQUERY 将包含数据集的 JSON 绑定到下拉列表
【发布时间】：2015-03-18 10:59:24
【问题描述】：

我有一个 WCF 服务返回的JSON string，它在 Data 中包含两个表，作为其中的一个字符串：

JSON

{
   "GetYearsResult":
   {
       "Data": "{"Table":[{"holiday_date":null},{"holiday_date":1900},
                          {"holiday_date":2011},{"holiday_date":2012},{"holiday_date":2013},
                          {"holiday_date":2014},{"holiday_date":2015},{"holiday_date":2016},
                          {"holiday_date":2017},{"holiday_date":2018},{"holiday_date":2019},
                          {"holiday_date":2020},{"holiday_date":2021},{"holiday_date":2022},
                          {"holiday_date":2023},{"holiday_date":2024},{"holiday_date":2025}]
               ,"Table1":[{"holiday_day":1}]}",
       "Metadata":
       {
           "Response": 1000,
           "ResponseCode": 1000,
           "ResponseMessage": "Success",
           "ResponseTime": "18-Mar-2015 15:29:55"
       }
   }
}

我尝试使用JavaScript 绑定它，如下所示：

function ConsumeData(data) {
        var response = $.parseJSON(data);
        $('#ddlYears').empty();

        //code to bind data to ddl
        var ddl = D.getElementById('ddlYears');
        var opt = D.createElement("option");
        opt.text = '--Select--';
        opt.value = 0;
        ddl.options.add(opt);
        for (i = 0; i < response.Table.length; i++) {
            opt = D.createElement("option");
            opt.text = response.Table[i]['holiday_date'];
            opt.value = response.Table[i]['holiday_date'];
            ddl.options.add(opt);
        }
}

如何使用JQUERY 实现相同的效果？
谢谢！

【问题讨论】：

普通的旧 javascript 有什么问题？无论如何，如果您确实想将其“转换”为 jquery，您只需获得 var ddl = $('#ddlYears') 之类的 ddl，然后执行 for 循环并将元素附加到它，例如 ddl.Append('') 与您的文本和值在那里明显。
是的，你说得对，但是使用ddl.Append('<option ></option>') 没有成功...这就是我发布auestion 的原因！

标签： javascript jquery json wcf

【解决方案1】：

我自己想出了解决方案！ :)
问题在于包含 GetYearsResult 作为表集合的 JSON 对象，要找到这些表，我们必须指定：

data.GetYearsResult.Data 和
data.GetYearsResult.MetaData。

以下函数接受 JSON 数据、下拉名称并将数据集的第一个表绑定到 drop-down list，第二个使用 Jquery 绑定到 textbox。

var result = data.GetYearsResult.Data;
var ddl = D.getElementById('ddlYears');

function ConsumeData(result, ddl) {
   var response = $.parseJSON(result);
   var ddl = $('#ddlYears');
   ddl.empty();
   ddl.append($("<option></option>").val('-1').html('--select--'));
   $.each(response.Table, function (key, value) {
      ddl.append($("<option></option>").val(value.holiday_date).html(value.holiday_date));
   });
   $('#txtNew').val(response.Table1[0]['holiday_day']);
}

【讨论】：

【解决方案2】：

试试这个：

var $ddl = $('#ddlYears');
$("<option>").val(0).text('--Select--').appendTo($ddl);

for (var i = 0; i < response.Table.length; i ++) {
    $("<option>").val(response.Table[i]['holiday_date'])
                 .text(response.Table[i]['holiday_date'])
                 .appendTo($ddl);
}

【讨论】：

感谢您的回答，但是，它给出了错误，TypeError: $(...).val(...).text(...).appendTo is not a function
那是因为你从JSON字符串中删除了"GetYearsResult": {