HTML 获取所选选项 JavaScript

在 HTML 中，我们经常会使用下拉菜单（select）来让用户选择一个或多个选项。在 JavaScript 中，我们可以轻松地获取用户所选择的选项，以作进一步的处理。

获取所选选项的基本方法

获取所选选项有很多种方法，以下是其中最基本的一种：

var selectElement = document.getElementById("mySelect");
var selectedValue = selectElement.options[selectElement.selectedIndex].value;

这个方法的原理很简单：首先获取 select 元素，然后通过 options 属性获取所有选项，再通过 selectedIndex 属性获取用户所选的那个选项的下标，最后通过 value 属性获取该选项的值。

需要注意的是，如果我们要获取选项的文本内容而不是值，可以将 value 属性改为 text 属性即可。

处理多选选项

多选选项（multiple）允许用户选择多个选项，此时我们需要稍微改变一下上面的代码：

var selectElement = document.getElementById("mySelect");
var selectedValues = Array.from(selectElement.selectedOptions).map(option => option.value);

这个方法的原理也很简单：首先获取 select 元素，然后通过 selectedOptions 属性获取所有被选中的选项，再通过 map 方法将这些选项的 value 属性存到数组中。

小结

以上是获取所选选项的两种基本方法，还有很多其他方法可以使用，比如通过 jQuery 等框架来获取。无论使用哪种方法，我们都需要注意保证代码的可读性和易维护性，以便日后的开发和维护工作。