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"]')].forEach(sel => res.push(sel.value) )

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

#include "Data.h"
class P{

protected:
          Data birthday;
public:
       P();
       P(const int, const int, const int); //i should pass day, month, year right?
       P(const P&);
}

Answer 3

您还可以执行以下操作来选择选项的值：

subscribe

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);
  }
}

只是一个示例。

Answer 4

您可以尝试使用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>

Answer 5

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

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

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

来自formal specification：

[att ^ = val]

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

querySelectorAll获取下拉菜单的选定值

5 个答案: