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

Question

我想通过使用querySelector而不是jQuery由具有多个属性的标记选择的值数组。 我用谷歌搜索，但谷歌只列出了有关使用querySelector选择多个元素的信息。就我而言，我想要一个具有多个属性的选择元素。 我放弃了搜索，只是尝试使用此标记进行编码。     测试1      test2      test3 在JavaScript中，我尝试如下进行操作，但是没有任何效果。 const values = document.querySelector（“＃bgmSources”）。value; console.log（values）; const selectedOptions = document.querySelectorAll（“＃bgmSources option：selected”）; selectedOptions.forEach（option => console.log（option））; 有没有一种方法可以在具有多个属性的标记中获取所选选项的数组？

1 个答案:

答案 0 :(得分：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。

相关问题

• jquery选择具有多个属性的元素
• Jsoup如何选择具有多个属性的标签
• 下拉选择多个属性
• JQuery Select基于多个属性
• 关于带有多个选择器的querySelector（）
• 使用多个queryselector循环多个类
• Grails：从具有多个属性的控制器渲染选择标记
• 使用jsonpath选择多个属性
• 抓取具有多个属性的标签
• 具有多个属性的<select>标记上的querySelector

最新问题

• 我写了这段代码，但我无法理解我的错误
• 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
• 是否有可能使 loadstring 不可能等于打印？卢阿
• java中的random.expovariate()
• Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
• 为什么我的 Onclick 箭头功能在 React 中不起作用？
• 在此代码中是否有使用“this”的替代方法？
• 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
• 每千个数字得到
• 更新了城市边界 KML 文件的来源？

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。