Question

我的网站上有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，让它们保持独特。而是使用类来引用元素组。

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

＆＃13;

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');

＆＃13;

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

＆＃13;

Javascript填充选择仅适用于第一个目标

1 个答案: