通过 javascript 使用来自 ajax 的数据填充 <select>

Question

虽然我发现了类似的问题，但那里提到的解决方案似乎对我不起作用。

我正在尝试做的事情：

1. 使用 Ajax 获取我的数据库的所有表名
2. 将表名称作为带有相应值的选项填充到选择字段中

我已经走了多远：

我的 fetch_devices php 脚本回显：

["test1","test2","test3"]

function FetchDevices(){
alert("Fetching");
$.ajax({
    url: 'php/sql/fetch_devices.php',
    success: function(devices) {
        var elements = Object.keys(devices).length;
        var select = document.getElementById("devices");
        var option = document.createElement("option");
        var i = 0;
        while(i < elements)
        {
            option.text= devices[i];
            option.value= devices[i];
            select.appendChild(option);
            i++;
        }

    },
    cache: false
});

}

但最后我只看到最后一个选项“test3”.....

为什么会这样？

提前致谢！

最好的问候，

Answer 1

您正在覆盖相同的option。也可以使用add()。改成

 while(i < elements)
    {
        var option = document.createElement("option");
        option.text= devices[i];
        option.value= devices[i];
        select.add(option);
        i++;
    }