用Js 写一个下拉框多选功能
时间: 2023-09-09 20:08:25 浏览: 48
好,下面是一个简单的下拉框多选功能的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>下拉框多选功能示例</title>
</head>
<body>
<select id="mySelect" multiple>
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
</select>
<button onclick="getSelectedOptions()">获取选中的选项</button>
<script>
function getSelectedOptions() {
var selectElement = document.getElementById("mySelect");
var selectedOptions = [];
for (var i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i].selected) {
selectedOptions.push(selectElement.options[i].value);
}
}
alert("选中的选项为:" + selectedOptions.join(", "));
}
</script>
</body>
</html>
```
在上面的代码中,我们首先创建一个带有 multiple 属性的 select 元素,这个属性表示我们可以选择多个选项。然后,我们创建一个按钮,当点击按钮时,调用名为 getSelectedOptions 的函数,该函数将获取所选选项的值并将其显示在弹出框中。在函数内部,我们首先获取 select 元素,然后遍历其所有选项。如果某个选项被选中,我们将其值添加到一个名为 selectedOptions 的数组中。最后,我们使用 alert 函数将选中的选项值显示在弹出框中。