一、基本概念
下拉多选框通常作为表单输入模块的一种，其主要特点在于可以让用户在一个列表中选择多个选项，这在普通的下拉框无法满足用户需求时非常有用。
在HTML中，下拉多选框的定义方式为<select multiple></select>，其中multiple属性表示可以多选。
二、基本用法
下面我们来看一个基本的下拉多选框实现：
<select multiple>
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
在上述代码中，每个<option>标签代表一个选项，其中value属性表示选项的值，文本部分表示选项的显示文本。
在选择完成之后，通过JavaScript代码可以获取所有选中的选项的值，进行后续的操作。
三、进阶用法
1、设置默认选项
由于下拉多选框可以有多个默认选项，因此需要设置selected属性来指定每个默认选项。例如：
<select multiple>
<option value="option1" selected>选项1</option>
<option value="option2">选项2</option>
<option value="option3" selected>选项3</option>
</select>
2、设置容器宽度和高度
下拉多选框通常会显示出输入内容，可以通过CSS样式的设置，来控制容器的宽度和高度。例如：
<select multiple style="width: 200px; height: 100px;">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
3、设置禁用选项
有时候需要限制用户对一些选项的使用，在这种情况下可以禁用某些选项。例如：
<select multiple>
<option value="option1" disabled>选项1</option>
<option value="option2">选项2</option>
<option value="option3" disabled>选项3</option>
</select>
四、实例代码
以下是一个完整的示例代码，包括CSS样式和JavaScript代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉多选框示例</title>
<style>
select {
width: 200px;
height: 100px;
font-size: 16px;
}
</style>
<script>
function getSelectedOptions() {
var selectedOptions = [];
var select = document.getElementById("my-select");
for(var i = 0; i < select.options.length; i++) {
if(select.options[i].selected) {
selectedOptions.push(select.options[i].value);
}
}
console.log(selectedOptions);
}
</script>
</head>
<body>
<select multiple id="my-select">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
<option value="option4" selected>选项4</option>
<option value="option5" disabled>选项5</option>
</select>
<button onclick="getSelectedOptions()">获取选中值</button>
</body>
</html>
