通过循环向 javascript 中的所有 select 元素添加新选项时出现问题

Question

我想在页面中所有现有的下拉菜单中添加一个新选项。 我使用 querySelectorAll 获取所有菜单并遍历每个菜单并添加选项。

// creating my option
let opt;
opt = document.createElement('option');
opt.value = 10;
opt.text = 'hello';

// looping and adding the option
document.querySelectorAll('select').forEach(ele => {
  ele.add(opt);
});

但是，问题只是最后一个下拉列表正在添加此选项。 前面的所有选择都不受影响。 为什么？ 但是，如果我在循环中创建新选项，如下所示，所有 select 列表都会按预期更新

document.querySelectorAll('select').forEach(ele => {
let opt;
opt = document.createElement('option');
opt.value = 10;
opt.text = 'hello';
ele.add(opt);
});

为什么会这样？ 请帮忙。

Answer 1

虽然这个问题在这里已经有了答案（每次添加都需要一个新元素）：

forEach 循环只创建最后一个 DOM 元素
为什么 each() 循环只改变最后一个元素？
for 循环中的 appendChild 仅添加 1 个孩子
Javascript 循环：插入元素仅在最后一次迭代中起作用

我会发布我的建议，因为它比其他建议更简单

 let opt = new Option('10', 'hello'); const sels = document.querySelectorAll("select").forEach(s => s.appendChild(opt.cloneNode(true)));

 <select name="one"> <option value="1">One</option> </select> <select name="two"> <option value="1">Two</option> </select> <select name="three"> <option value="1">Three</option> </select> <select name="four"> <option value="1">Four</option> </select>

Answer 2

您的代码不起作用，因为document.createElement("option")仅被调用一次，随后相同的元素被重新分配给一系列select元素。 在第一次之后，相同的选项被简单地移动到下一个 select 并且没有被复制。

与此相反，以下脚本使用元素方法.insertAdjacentHTML()创建新元素并将它们添加到指定点。

 document.querySelector("button").onclick=ev=>{ document.querySelectorAll("select").forEach(s=>s.insertAdjacentHTML("beforeend",'<option value="10">hello</option>')); }

 <select name="one"><option value="1">Start</option></select> <select name="two"><option value="1">as you</option></select> <select name="three"><option value="1">mean to</option></select> <select name="four"><option value="1">go on!</option></select> <br><button>add an option</button>