如何找到 HTML 选择标签的所有选定选项？

简介

HTML 选择标签（Select tag）是用于让用户从预定义的选项列表中选择一个或多个选项的标签。但是，在一些场景下我们需要知道所有被选定的选项，如何获取呢？

本文将介绍两种使用 JavaScript 获取 HTML 选择标签的选定选项的方法。

方法一：获取所有选项并遍历比较

首先，我们需要获取该标签的所有选项。

let selectTag = document.getElementById("select-tag-id");
let options = selectTag.options;

以上代码将获取到 HTML 选择标签 ID 为 select-tag-id 的所有选项并保存在变量 options 中。

接着，我们可以遍历该数组，并检查每一个选项的 selected 属性是否为 true。如果是，则表示该选项被选定了。

let selectedOptions = [];
for (let i = 0; i < options.length; i++) {
  if (options[i].selected) {
    selectedOptions.push(options[i].value);
  }
}

以上代码将遍历 options 数组，检查每一个选项是否被选定，并将选定的选项保存在数组 selectedOptions 中。

最终，我们可以通过以下代码获取所有被选定的选项。

console.log(selectedOptions);

方法二：使用 jQuery 库

如果你的项目中使用了 jQuery 库，那么获取 HTML 选择标签的选定选项就非常简单。只需要一行代码即可。

let selectedOptions = $("#select-tag-id").val();

以上代码将获取 HTML 选择标签 ID 为 select-tag-id 的所有被选定的选项并存储在数组 selectedOptions 中。

最终，我们可以通过以下代码获取所有被选定的选项。

console.log(selectedOptions);

总结

本文介绍了两种获取 HTML 选择标签的选定选项的方法，分别是使用纯 JavaScript 和使用 jQuery 库。这些方法可以让你轻松地把所有被选定的选项获取到，以便在适当的时候使用。