我的网站中有 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 代码来为两个下拉菜单添加选项?
最佳答案
不要重复 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>
关于Javascript populate select 仅适用于第一个目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31137985/