javascript - querySelectorAll 获取下拉列表的选定值

Question

我想使用 querySelectorAll 获取页面上多个下拉列表的选定值，然后将它们打印在页面上的其他位置。

我正在努力寻找正确的方法来执行此操作，因为它们都有不同的名称(“dropDown[0]”和“dropDown[1]”等)。我无法更改命名约定，因此我需要找到一种方法来选择名称中包含“dropDown”的所有下拉菜单，然后打印用逗号分隔的值。

这是我迄今为止尝试过的:

const dropDowns = document.querySelectorAll('select[name="dropDown"]')
if (!dropDowns) return
this.dropDown = dropDowns.options[dropDowns.selectedIndex].text
this.dropDown.join(', ')

<div class="form-group">
  <label for="dropDown1">Dropdown 1:</label>
  <select name="dropDown[0]" id="dropDown1" class="form-control">
    <option value="D20">Option 1</option>
    <option value="T20">Option 2</option>
    <option value="T11">Option 3</option>
    <option value="S10">Option 4</option>
  </select>
</div>
<div class="form-group">
  <label for="dropDown2">Dropdown 2:</label>
  <select name="dropDown[1]" id="dropDown2" class="form-control">
    <option value="D20">Option 1</option>
    <option value="T20">Option 2</option>
    <option value="T11">Option 3</option>
    <option value="S10">Option 4</option>
  </select>
</div>

Answer 1

使用^= starts with selector然后映射:

var res = [...document.querySelectorAll('select[name^="dropDown"]')].map(sel => sel.value) 

像这样

const show = () => {
  const res = [...document.querySelectorAll('select[name^="dropDown"]')].map(sel => sel.value);
  document.getElementById("res").innerText = res.join(", ")
};
window.addEventListener("load", () => {
  document.getElementById("container").addEventListener("change", e => {
    const tgt = e.target;
    if (tgt.classList.contains("form-control") && tgt.id.startsWith("dropDown")) { show ()}
  });
  show(); // init
})

<div id="container">
  <div class="form-group">
    <label for="dropDown1">Dropdown 1:</label>
    <select name="dropDown[0]" id="dropDown1" class="form-control">
      <option value="D20">Option 1</option>
      <option value="T20">Option 2</option>
      <option value="T11">Option 3</option>
      <option value="S10">Option 4</option>
    </select>
  </div>
  <div class="form-group">
    <label for="dropDown2">Dropdown 2:</label>
    <select name="dropDown[1]" id="dropDown2" class="form-control">
      <option value="D20">Option 1</option>
      <option value="T20">Option 2</option>
      <option value="T11">Option 3</option>
      <option value="S10">Option 4</option>
    </select>
  </div>
</div>
<span id="res"></span>

较旧的不太优雅的答案:

const onchange = () => {
  var res = [];
  [...document.querySelectorAll('select[name^="dropDown"]')].forEach(sel => res.push(sel.value) );
  document.getElementById("res").innerText = res.join(", ")
}
[...document.querySelectorAll('select[name^="dropDown"]')].forEach(sel => sel.addEventListener("change",onchange));  
onchange()  

<div class="form-group">
  <label for="dropDown1">Dropdown 1:</label>
  <select name="dropDown[0]" id="dropDown1" class="form-control">
    <option value="D20">Option 1</option>
    <option value="T20">Option 2</option>
    <option value="T11">Option 3</option>
    <option value="S10">Option 4</option>
  </select>
</div>
<div class="form-group">
  <label for="dropDown2">Dropdown 2:</label>
  <select name="dropDown[1]" id="dropDown2" class="form-control">
    <option value="D20">Option 1</option>
    <option value="T20">Option 2</option>
    <option value="T11">Option 3</option>
    <option value="S10">Option 4</option>
  </select>
</div>
<span id="res"></span>