如何将多选select元素中选中的选项映射为数组？排查option:checked返回空数组问题

嘿，我来帮你解决这个问题！咱们先拆解一下你遇到的问题，再给出靠谱的解决方案。

为什么你的尝试会出问题？ #

你原来的代码Array.from(document.querySelector("#listado")).map(elemento => elemento.value)之所以返回所有选项，是因为document.querySelector("#listado")拿到的是整个<select>元素，Array.from()会把这个元素的所有子节点（也就是全部<option>）转成数组，自然会包含所有选项。

至于你说加了option:checked却得到空数组，大概率是两个原因之一：

1. 你用了document.querySelector()而不是document.querySelectorAll()——前者只会返回第一个匹配的元素，如果没选中任何选项，它会返回null；如果选中多个，也只能拿到第一个，转成数组后也不是你要的结果。
2. 你测试的时候根本没选中任何选项——这时候不管用哪种选择器，拿到的都是空集合，转成数组自然是空的。

正确的实现方式 #

这里有两种简单可靠的方法，任你选：

方法1：用选择器选中所有已勾选的选项 #

用document.querySelectorAll()获取所有选中的<option>，它会返回一个包含所有匹配元素的NodeList，再转成数组映射value即可：

const selectedAficiones = Array.from(document.querySelectorAll("#listado option:checked"))
  .map(opt => opt.value);

方法2：利用Select元素自带的selectedOptions属性（更简洁） #

HTML的<select>元素本身就有一个selectedOptions属性，它直接返回所有选中的选项集合，用这个方法更直观，也不用写复杂的选择器：

const selectElement = document.querySelector("#listado");
const selectedAficiones = Array.from(selectElement.selectedOptions)
  .map(opt => opt.value);

举个例子，如果你选中了「Leer」和「Programar」，上面的代码都会返回["Leer", "Programar"]，完全符合你的需求。

小提示 #

如果测试时还是得到空数组，先检查一下你有没有真的选中选项（多选需要按住Ctrl/Command点击哦），或者看看选择器有没有写错——比如有没有漏写#listado前缀，导致选中了页面上其他的<option>。

内容的提问来源于stack exchange，提问作者Luis Fernandez