具有多个属性的 <select> 标记上的 querySelector答案

【问题标题】：querySelector on <select> tag with multiple attributes具有多个属性的 <select> 标记上的 querySelector
【发布时间】：2019-04-05 11:24:48
【问题描述】：

我想通过使用querySelector而不是jQuery来获得一个由<select>标签选择的具有多个属性的值数组。

我对此进行了谷歌搜索，但谷歌仅列出了使用 querySelector 选择多个元素的信息。就我而言，我想要一个具有多个属性的选择元素。

我放弃了搜索，我只是尝试使用这个<select> 标记进行编码。

<select id="bgmSources" className="bgmSelector" multiple="multiple"> 
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

在 JavaScript 中，我尝试如下，但没有任何效果。

const values = document.querySelector("#bgmSources").value;
console.log(values);

const selectedOptions = document.querySelectorAll("#bgmSources option:selected");
selectedOptions.forEach(option => console.log(option));

有没有办法获取<select>标签中具有多个属性的选定选项数组？

【问题讨论】：

a) "#bgmSources option:selected" 无效，b) selectedOptions 未在代码 1 中声明 ...首先修复简单错误（#bgmSources option[selected] 是您想要的 2.工作）
感谢您提供工作代码“option[selected]”，我将编辑我在这篇文章中尝试的代码。我尝试的真实代码与我帖子中的这段代码不同。

标签： javascript jquery-selectors

【解决方案1】：

您可以选择 :checked 的子选项，然后获取每个选定选项的值：

bgmSources.onchange = () => {
  const selectedOptionVals = Array.from(
    bgmSources.querySelectorAll(':scope > option:checked'),
    ({ value }) => value
  );
  console.log(selectedOptionVals);
};

<select id="bgmSources" className="bgmSelector" multiple="multiple"> 
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

很遗憾，您不能使用.value 为multiple 获得有意义的结果，而且您必须使用:checked，而不是:selected。

【讨论】：