写一段完整的html多选下拉输入框代码
时间: 2024-10-23 22:12:06 浏览: 3
当然可以,HTML中创建一个多选(checkbox)的下拉列表(select)通常用于让用户选择多个选项。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>多选下拉框示例</title>
</head>
<body>
<label for="options">请选择你喜欢的水果:</label>
<select id="options" multiple>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
<option value="grape">葡萄</option>
<option value="watermelon">西瓜</option>
</select><br>
<button onclick="showSelected()">显示所选选项</button>
<script>
function showSelected() {
var selectedOptions = document.getElementById('options').selectedOptions;
var selectedValues = [];
for (var i = 0; i < selectedOptions.length; i++) {
selectedValues.push(selectedOptions[i].value);
}
alert("您选择了:" + selectedValues.join(", "));
}
</script>
</body>
</html>
```
在这个例子中,`multiple`属性使得用户可以选择多个选项。点击“显示所选选项”按钮会弹出一个警告框显示用户选择的值。
阅读全文