<select> 标签上的 querySelector 具有多个属性

Question

我想通过使用 querySelector 获得一个由具有多个属性的 select 标记 select 编辑的值数组，而不是jQuery.

我用谷歌搜索了一下，但是 Google 使用 querySelector 只列出了大约 select 多个元素。在我的例子中，我想要一个具有多个属性的 select 元素。

我放弃了搜索，我只是尝试用这个 <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> 标签中获取 selected 选项数组？

Answer 1

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

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。

<select> 标签上的 querySelector 具有多个属性

querySelector on <select> tag with multiple attributes

javascript

jquery-selectors