0

我有一个 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 时，当此代码触发时，它会创建一个<select>具有 1 个选项的选项，其内部 HTML 读取为[object Object].

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

4

2 回答 2

1

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

data[i].id并且data[i].name很可能是您正在寻找的东西。

于 2012-10-17T11:55:00.923 回答
0

你需要data[i].id&data[i].name来构建你的选择。

for(var i = 0; i < len; i++) {
        optionsHTML += '<option value="' + data[i].id + '">'
            + data[i].name + '</option>';
}
于 2012-10-17T11:56:02.570 回答