添加元素在html中添加两个位置

Question

document.querySelector('#submit').onclick = () => {
  document.querySelectorAll('.merge').forEach((select) => {
    const option = document.createElement('option');
    option.innerHTML = document.querySelector('#text-get').value;
    document.querySelector('.merge').append(option);
  })
  return false;
};

<select id="task" class="merge">

</select>

<select id="task2" class="merge">

</select>

<form>
  <input type="text" id="text-get">
  <input type="submit" id="submit">
</form>

我想在两个下拉菜单中添加选项，但输入标签相同    值。

JavaScript代码有问题。它没有添加任何代码。

Answer 1

您很近。尝试这种方式：

const selects = document.querySelectorAll('.merge'), // Caching elements so the DOM won't be queried constantly
      input = document.querySelector('#text-get');

document.querySelector('#submit').onclick = () => {
  selects.forEach(select => {
    let option = document.createElement('option');
    option.innerHTML = input.value;
    select.append(option)
  });
  return false;
};

<select id="task" class="merge">

</select>

<select id="task2" class="merge">

</select>

<form>
  <input type="text" id="text-get">
  <input type="submit" id="submit">
</form>