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>

Answer 2

document.querySelectorAll('[name^="dropDown"]').forEach(function(node) {console.log(node.options[node.selectedIndex].value);});

Answer 3

您不能在选择器中使用正则表达式，但 CSS 选择器的强大功能足以满足您的需求，它具有受正则表达式启发的“开头”语法。

您可以使用匹配属性选择器的子字符串：select[name^=dropDown]

读取“select 类型的节点，属性为name，以“dropDown”开头

来自formal specification：

[att^=val]

表示具有att属性的元素，其值以前缀“val”开头。如果 "val" 是空字符串，则选择器不代表任何内容。

Answer 4

当你想选择选项的值时，你也可以这样做：

var Container = document.querySelector('#output');

var Dropdowns = document.querySelectorAll('select');


// Select All Options Values:
for ( var dropdown in Dropdowns ) {
  for ( var i = 0; i < Dropdowns[dropdown].children.length; i++ ) {
    var elem = document.createElement('p');
    elem.innerHTML = Dropdowns[dropdown].children[i].value;
    Container.appendChild(elem);
  }
}

<select>
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
</select>

<select>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
  <option value="8">Number 8</option>
  <option value="9">Number 9</option>
</select>

<div id="output"></div>

这只是一个例子。

Answer 5

你可以试试Attribute selector

const dropDowns = document.querySelectorAll('select[name^="dropDown"]');
dropDowns.forEach(function(el){
  el.addEventListener('change', getOptions);
});

function getOptions(){
  console.clear();
  var res = Array.from(dropDowns).map(d => d.options[d.selectedIndex].text).join(', ');
  console.log(res);
}

getOptions();

<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>