query具有<select>多个属性的标记上的选择器

Question

我想获取一个值数组，该数组通过使用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>标签中获取所选选项的数组？

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。