带有多个属性的标记上的querySelector
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带有多个属性的标记上的querySelector相关的知识，希望对你有一定的参考价值。
我想通过使用<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>标签中获取具有多个属性的所选选项数组？
答案
您可以选择: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>以上是关于带有多个属性的标记上的querySelector的主要内容，如果未能解决你的问题，请参考以下文章
document.querySelector 一个元素中的多个数据属性