在 web 开发中，<select> 元素是用于创建下拉选择框的常见元素。通过设置multiple属性，可以让用户可以选择多个选项，而不是只能选择一个。
语法
<select multiple>元素的语法如下：
------- --------- ------- ---------------------- ---------- ------- ---------------------- ---------- ------- ---------------------- ---------- ---------
示例
下面是一个简单的示例，展示了如何创建一个具有multiple属性的下拉选择框：
------- --------- ------- ---------------------- ---------- ------- ---------------------- ---------- ------- ---------------------- ---------- ---------
在这个示例中，用户可以通过按住Ctrl键（在 Windows 上）或Command键（在 Mac 上）来选择多个选项。
使用 JavaScript 访问选择的选项
如果您想通过 JavaScript 访问用户选择的选项，可以通过以下方式实现：
------- ------------- ---------
------- ---------------------- ----------
------- ---------------------- ----------
------- ---------------------- ----------
---------
--------
----- ------------- - ------------------------------------
---------------------------------------- ---------- -
----- --------------- - ---------------------------------------------------- -- --------------
-----------------------------
---
---------在这个示例中，我们首先通过getElementById方法获取了<select>元素，然后添加了一个change事件监听器。当用户选择一个或多个选项时，将打印所选选项的值。
样式化多选下拉框
默认情况下，浏览器会以其自己的方式呈现多选下拉框。如果您想自定义外观，可以使用 CSS 样式来实现。
-------
---------------- -
------ ------
------- ------
------- --- ----- -----
-------------- ----
-------- ----
-
--------在这个样式中，我们定义了一个宽度为200px，高度为100px的多选下拉框，并添加了一些边框和圆角样式。
总结
通过使用multiple属性，您可以让用户在下拉选择框中选择多个选项，为用户提供更灵活的选择体验。同时，通过 JavaScript 和 CSS，您可以进一步定制多选下拉框的功能和外观。希望本文对您有所帮助，谢谢阅读！