用json数据填充下拉列表

Populate dropdown with json data

本文关键字：下拉列表 填充 数据 json      更新时间：2023-09-26

我正在尝试从JSON页面填充数据下拉框。

下面是我使用的代码: 
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $.ajax({
            url: "json/wcf.svc/GetTax",
            dataType: 'json',
            data: data
        });
        $($.parseJSON(data.msg)).map(function () {
            return $('<option>').val(this.value).text(this.label);
        }).appendTo('#taxList');
    });
</script>

json数据返回:

{"d":"{'"16'":'"hello'",'"17'":'"world'"}"}

我得到一个错误，"数据是未定义的。"我是否需要告诉JQ如何读取json数据?

首先，您传递给ajax调用的数据变量没有定义(好吧，不是在您提供的代码示例中)，其次，ajax调用是异步发生的，所以您需要对返回的数据做一些事情，即通过成功回调。例子:

$(document).ready(function () {
    var data = //define here
    $.ajax({
        url: "json/wcf.svc/GetTax",
        dataType: 'json',
        data: data, // pass it in here
        success: function(data)
        {
            $(data.msg).map(function () {
                return $('<option>').val(this.value).text(this.label);
            }).appendTo('#taxList');
        }
    });       
});

也不需要解析ajax调用返回的数据，因为jQuery会自动为您解析JSON，(应该需要$.parseJSON(data.msg))

编辑

基于JSON的有趣格式，并假设它不能被更改，这应该可以工作(尽管很难看)

$(document).ready(function () {
        var data = //define here
        $.ajax({
            url: "json/wcf.svc/GetTax",
            dataType: 'json',
            data: data, // pass it in here
            success: function(data)
            {
                 data = data.d.replace(/{/g, '').replace(/}/g, '').split(',');
                 var obj = [];
                 for (var i = 0; i < data.length; i++) {
                     obj[i] = {
                      value: data[i].split(':')[0].replace(/"/g, '').replace('''', ''),
                      label: data[i].split(':')[1].replace(/"/g, '')
                     };
                 }
                 var htmlToAppend = "";
                 for (var j = 0; j < obj.length; j++) {
                     htmlToAppend += '<option value="' +
                         obj[j].value +
                         '">' + obj[j].label +
                         '</option>';
                 }
                 $('#taxList').append(htmlToAppend);
            }
        });       
    });

您需要使用success选项返回数据。

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $.ajax({
            url: "json/wcf.svc/GetTax",
            dataType: 'json',
            success: function(data){
           $(data.msg).map(function () {
            return $('<option>').val(this.value).text(this.label);
        }).appendTo('#taxList');
        }
        });

    });
</script>
相关文章：