首页html实现多选择下拉列表

html实现多选择下拉列表

时间: 2024-09-19 16:09:31 浏览: 34

在HTML中，要实现一个多选择的下拉列表，通常会使用`<select>`标签配合`<option>`标签。下面是一个基本的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>多选下拉列表示例</title> </head> <body> <label for="multiSelect">请选择多个选项：</label> <select id="multiSelect" name="multiSelect" multiple>  <option value="option1">选项一</option>  <option value="option2">选项二</option>  <option value="option3">选项三</option>  </select> <button onclick="showOptions()">显示选中的选项</button> <script> function showOptions() { var select = document.getElementById('multiSelect'); var selectedOptions = Array.from(select.options).filter(option => option.selected); console.log('选中的选项:', selectedOptions.map(option => option.text)); } </script> </body> </html> ``` 在这个例子中，`multiple`属性使得`<select>`元素变为多选模式。用户可以选择多个选项。点击按钮`showOptions()`时，JavaScript会获取选中的`<option>`并打印出来。

阅读全文