Question

我有一个HTML <select>：

<div id="content">
    <input type="button" id="get-btn" onclick="getData();"/>
    <select id="attrib-type-sel"></select>
</div>

当用户点击以下按钮时，我想使用jQuery的getJSON方法点击我的服务器，撤回数据，并使用选项填充<select>：

$(document).ready(function() {
    $.getJSON(
        "some/url/on/my/server",
        function(data) {
        var optionsHTML = "";
        var len = data.length;
        for(var i = 0; i < len; i++) {
            optionsHTML += '<option value="' + data[i] + '">'
                + data[i] + '</option>';
        }

        $('#attrib-type-sel').html(optionsHTML);
    });
});

当我运行此代码时，在Firebug中，我看到AJAX调用成功并返回以下JSON：

[
    {
        "id":1,
        "name":"Snoopy",
        "tag":"SNOOPY",
        "allowsAll":false
    }
]

（仅返回1条记录）。

但是，当回到用户界面时，当此代码触发时，会创建一个<select>，其中包含1个内部HTML为[object Object]的选项。

有人能发现这里发生了什么吗？看起来我的getJSON没问题，但是从结果中提取JSON并使用它来填充我的选择的代码是错误的。提前谢谢！

Answer 1

这是因为数据[i]是一个对象。尝试使用console.log(data[i])查看它的外观。

data[i].id和data[i].name可能就是你要找的东西。

Answer 2

您需要data[i].id＆amp; data[i].name构建您的选项。

for(var i = 0; i < len; i++) {
        optionsHTML += '<option value="' + data[i].id + '">'
            + data[i].name + '</option>';
}

jQuery getJSON没有正确填充HTML选择

2 个答案: