多个HTML select元素无法批量添加数组选项的问题求助

为啥只有第一个select生效？ #

• HTML规范问题：id是页面元素的唯一标识，同一个页面里不能有多个元素用同一个id。不管是getElementById还是querySelector，遇到重复id只会返回第一个匹配的元素，所以你的代码只能操作第一个select。
• JS逻辑问题：原代码只获取了单个select元素，循环添加选项的时候只会往这一个里面加，其他select根本没被操作到。

修复步骤 #

1. 修正HTML的标识问题

把所有select的id="ku"改成class="ku"，class允许重复使用，用来标识同一类元素：

<select class="ku">
    <option>Choose a number</option>    
</select>

<select class="ku">
    <option>Choose a number</option>    
</select>

<select class="ku">
    <option>Choose a number</option>    
</select>

2. 修改JS代码，遍历所有select添加选项

用querySelectorAll获取所有class为ku的select元素，然后逐个遍历，给每个select都添加选项：

// 获取所有class为ku的select元素，得到一个元素集合
var selects = document.querySelectorAll(".ku");
var options = ["kurs1", "Kurs2", "Kurs3", "Kurs4", "Kurs5"];

// 遍历每个select元素
selects.forEach(function(select) {
    // 给当前select添加所有选项
    for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var kurse = document.createElement("option");
        kurse.textContent = opt;
        kurse.value = opt;
        select.appendChild(kurse);
    }
});

额外说明 #

• querySelectorAll会返回所有匹配的元素，是一个类数组对象，可以用forEach遍历（主流浏览器都支持该方法）。
• 也可以用document.getElementsByClassName("ku")获取元素集合，不过它返回的是HTMLCollection，需要用普通for循环遍历：

var selects = document.getElementsByClassName("ku");
for(var j = 0; j < selects.length; j++) {
    var select = selects[j];
    // 给当前select添加选项
    for(var i = 0; i < options.length; i++) {
        var opt = options[i];
        var kurse = document.createElement("option");
        kurse.textContent = opt;
        kurse.value = opt;
        select.appendChild(kurse);
    }
}

内容的提问来源于stack exchange，提问作者Pio