写一段完整的html多选下拉输入框代码 需要可以输入,和多选
时间: 2024-10-23 14:19:32 浏览: 4
当然可以,这是一个基本的HTML多选下拉输入框的示例,允许用户输入并选择多个选项:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>多选下拉输入框</title>
</head>
<body>
<label for="select-multiple">请选择:</label>
<select id="select-multiple" name="options[]" multiple>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
<option value="option4">选项4</option>
<!-- 可添加更多的选项 -->
<option value="custom-input">自定义输入...</option>
</select>
<br><br>
<input type="text" id="custom-input" placeholder="请输入自定义内容">
<button onclick="saveSelection()">保存选择</button>
<script>
function saveSelection() {
var selectOptions = document.getElementById('select-multiple').selectedOptions;
var selectedValues = [];
for (var i = 0; i < selectOptions.length; i++) {
selectedValues.push(selectOptions[i].value);
}
console.log('选择的值:', selectedValues);
// 这里可以根据需要处理保存操作,比如提交到服务器等
}
</script>
</body>
</html>
```
在这个例子中,用户可以选择多个选项,并通过`<input>`标签输入自定义内容。当点击“保存选择”按钮时,会获取所选的选项值。
阅读全文