如何从<select multiple=multiple>中获取所有选中的值？

在前端开发中，<select>元素允许用户选择多个选项。然而，当需要获取所有选中的值时，很多初学者可能会感到困惑。本文将介绍如何使用JavaScript获取<select>元素中所有被选中的选项的值。

HTML代码

首先，我们需要在HTML中创建一个<select>元素，如下所示：

<select id="mySelect" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

注意，在<select>标签中添加了multiple属性，表示此<select>元素可以选择多个选项。

JavaScript代码

接下来，我们使用JavaScript来获取所有选中的选项的值。具体步骤如下：

1. 首先，获取<select>元素的引用，可以通过id或其他方式获得。
2. 然后，遍历<select>元素中的所有选项，如果选项被选中，则将其值添加到数组中。
3. 最后，返回包含所有选中选项值的数组。

下面是完整的JavaScript代码：

-- -------------------- ---- -------
--- -------- - ------------------------------------
--- -------------- - ---

--- ---- - - -- - - ------------------------ ---- -
  -- ------------------------------ -
    -----------------------------------------------
  -
-

----------------------------

在这个示例中，我们首先获取了<select>元素的引用，并创建了一个空数组selectedValues来存储选中选项的值。然后，使用for循环遍历<select>元素中的每个选项，如果该选项被选中，则将其值添加到selectedValues数组中。最后，我们将该数组打印到控制台上。

结论

通过本文，我们学习了如何使用JavaScript获取<select>元素中所有被选中的选项的值。实际开发中，可以根据需要对上述代码进行修改和优化，以满足具体业务需求。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25789