Javascript populate select 仅适用于第一个目标

Question

这个问题已经有答案了:

Get multiple elements by Id (15 个回答)

已关闭 8 年前。

我的网站中有 2 个下拉菜单，一个适用于用户使用手机时，另一个适用于用户使用桌面时。我使用以下代码:

function populateSelect(target, min, max){
if (!target){
    return false;
}
else {
    var min = min || 0,
        max = max || min + 100;

    select = document.getElementById(target);

    for (var i = min; i<=max; i++){
        var opt = document.createElement('option');
        opt.value = i;
        opt.innerHTML = i;
        select.appendChild(opt);
    }
  }
}

populateSelect('howMany6');

两个下拉菜单共享相同的 ID:

<select class="form-control" id="howMany6" name="mituKeyd6" onChange="paljuKokku()"></select>

但是javascript只向dropdwon的移动版本添加选项，因为移动代码在HTML中位于桌面代码之前。我如何制作 javascript 代码来为两个下拉菜单添加选项？

Answer 1

不要重复 ID，保持唯一。相反，使用类来引用元素组。

在您的情况下，您需要循环遍历元素集合并分别填充每个元素。

function populateSelect(target, min, max) {
    if (!target) {
        return false;
    } 
    else {
        var min = min || 0,
            max = max || min + 100,
            select = document.querySelectorAll(target);

        for (var j = 0; j < select.length; j++) {
            for (var i = min; i <= max; i++) {
                var opt = document.createElement('option');
                opt.value = i;
                opt.innerHTML = i;
                select[j].appendChild(opt);
            }
        } 
    }
}

populateSelect('.howMany6');

<select class="form-control howMany6" name="mituKeyd6" onChange="paljuKokku()"></select>
<select class="form-control howMany6" name="mituKeyd6" onChange="paljuKokku()"></select>