带有多个属性的标记上的querySelector

Question

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

我用Google搜索，但谷歌只列出了使用querySelector选择多个元素。在我的例子中，我想要一个具有多个属性的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>标签中获取具有多个属性的所选选项数组？

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