在前端开发中，HTML 原生的 <select> 元素默认只支持单选。为了实现多选下拉框，你可以使用一些 JavaScript 库（如 jQuery UI 的 Multiselect 插件、Select2 等）或者纯 JavaScript 和 CSS。
以下是一个使用纯 HTML、CSS 和 JavaScript 实现多选下拉框的简单示例：
HTML
<div class="multiselect"><div class="selectBox" onclick="showCheckboxes()"><select><option>请选择选项</option></select><div class="overSelect"></div></div><div id="checkboxes"><label for="one"><input type="checkbox" id="one" />选项 1</label><label for="two"><input type="checkbox" id="two" />选项 2</label><label for="three"><input type="checkbox" id="three" />选项 3</label></div>
</div>
CSS
.multiselect {width: 200px;
}.selectBox {position: relative;
}.selectBox select {width: 100%;font-weight: bold;
}.overSelect {position: absolute;left: 0;right: 0;top: 0;bottom: 0;
}#checkboxes {display: none;border: 1px #dadada solid;max-height: 200px;overflow-y: auto;
}#checkboxes label {display: block;
}#checkboxes label:hover {background-color: #1e90ff;
}
JavaScript
var expanded = false;function showCheckboxes() {var checkboxes = document.getElementById("checkboxes");if (!expanded) {checkboxes.style.display = "block";expanded = true;} else {checkboxes.style.display = "none";expanded = false;}
}
这个示例中，.multiselect 类包含了一个模拟的下拉框和一个隐藏的复选框列表。当用户点击模拟的下拉框时，JavaScript 函数 showCheckboxes() 会切换复选框列表的显示/隐藏状态。你可以根据需要调整样式和功能。
请注意，这个示例是一个基本的实现，可能需要根据具体需求进行扩展和优化。例如，你可能需要添加逻辑来处理复选框的选中状态，并在模拟的下拉框中显示已选中的选项。
