jQuery getJSON无法正确填充HTML选择

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条记录）。

但是，当返回UI时，此代码触发时，它会创建一个具有1个选项的<select> ，其内部HTML读取[object Object] 。

有人可以看到这里发生的事情吗？ 看来我的getJSON可以，但是从结果中提取JSON并使用它填充我的选择的代码有很多问题。 提前致谢！

Answer 1

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

您可能正在寻找data[i].id和data[i].name 。

Answer 2

您需要data[i].id和data[i].name来构造您的选项。

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