一、HTML多选下拉框代码及基本属性
HTML多选下拉框可以让用户在一个下拉列表中选择多个选项，相对于单选下拉框而言，更加灵活和方便，因此在网页开发中应用广泛。以下为示例代码：
<select multiple="multiple">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
其中，multiple="multiple"属性表示该下拉框支持多选，选项之间用逗号分隔。每个选项使用<option>标签表示，value属性为选项的值，选中后提交表单会提交该值；显示在页面上的选项名称应该在该标签对中间添加。
要设置默认选中的选项，可以在<option>标签中添加selected属性。
二、HTML下拉框多选的实现方法
HTML本身是不支持多选下拉框的，所以需要借助JavaScript的力量来实现。以下是一种简单的实现方法：
<select id="testSelect" onchange="updateTextArea()">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<br>
<input type="hidden" id="testInput" name="testInput">
<textarea id="testArea" rows="3"></textarea>
<script type="text/javascript">
function updateTextArea(){
var selectedValues = "";
var selectedTexts = "";
var selectObj = document.getElementById("testSelect");
for(var i = 0; i < selectObj.options.length; i++){
if(selectObj.options[i].selected){
selectedValues += selectObj.options[i].value + ",";
selectedTexts += selectObj.options[i].text + ", ";
}
}
// 去除最后的逗号
selectedValues = selectedValues.substring(0, selectedValues.length - 1);
selectedTexts = selectedTexts.substring(0, selectedTexts.length - 2);
document.getElementById("testInput").value = selectedValues;
document.getElementById("testArea").value = selectedTexts;
}
</script>
实现原理：首先给
三、HTML多选下拉框带复选框的实现方法
为了提高可用性，有些多选下拉框会在每个选项前面添加一个复选框，用户只需要勾选需要的选项即可。以下是一种实现方法：
<div id="selectDiv">
<input type="text" readonly class="input-text" style="width:250px;" placeholder="请选择" onclick="showSelect()">
<ul id="selectUl" class="select">
<li><label><input type="checkbox" value="1">选项1</label></li>
<li><label><input type="checkbox" value="2">选项2</label></li>
<li><label><input type="checkbox" value="3">选项3</label></li>
</ul>
</div>
<script type="text/javascript">
function showSelect(){
var divObj = document.getElementById("selectDiv");
var ulObj = document.getElementById("selectUl");
if(ulObj.style.display == "block"){
ulObj.style.display = "none";
} else {
ulObj.style.width = divObj.offsetWidth - 2 + "px";
ulObj.style.display = "block";
}
}
</script>
实现原理：首先将标签中添加xm-select="demo"属性，它表示将该下拉框转换成多选下拉框组件，demo是这个组件的唯一标识。在页面加载完成后，通过layui.use()方法依次加载form、layer和jquery三个模块，并调用form.render()方法将标签对象和选项的个数，然后监听document对象的onkeydown事件，如果用户按下了上下箭头键或回车键则触发该事件。按上箭头时，将选项索引向上减1，如果减到0，则将索引指定为选项个数减1；按下箭头时，将选项索引向下加1，如果超过选项个数，则将索引指定为0；按回车键时，弹出一个消息框，显示选择的选项名称。
六、HTML下拉框默认值选取
HTML下拉框的默认选项可以通过在<option>标签中添加selected属性来实现，如下所示：
<select name="testSelect">
<option value="1">选项1</option>
<option value="2" selected>选项2</option>
<option value="3">选项3</option>
</select>
以上代码中，第二个选项<option value="2" selected>选项2</option>是默认选中的选项，因为它添加了selected属性。同样地，如果要选择多个默认选项，则可以在多个<option>标记中添加selected属性。
七、HTML多选下拉框的示例代码
最后，将前面的多个示例代码结合起来，得到一个完整的HTML多选下拉框示例代码如下：
<select id="testSelect" multiple="multiple">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<input type="hidden" id="testInput" name="testInput">
<textarea id="testArea" rows="3"></textarea>
<div id="selectDiv">
<input type="text" readonly class="input-text" style="width:250px;" placeholder="请选择" onclick="showSelect()">
<ul id="selectUl" class="select">
<li><label><input type="checkbox" value="1">选项1</label></li>
<li><label><input type="checkbox" value="2">选项2</label></li>
<li><label><input type="checkbox" value="3">选项3</label></li>
</ul>
</div>
<script type="text/javascript">
var selectIndex = 0;
var selectObj = document.getElementById("testSelect");
function updateTextArea(){
var selectedValues = "";
var selectedTexts = "";
for(var i = 0; i < selectObj.options.length; i++){
if(selectObj.options[i].selected){
selectedValues += selectObj.options[i].value + ",";
selectedTexts += selectObj.options[i].text + ", ";
}
}
// 去除最后的逗号
selectedValues = selectedValues.substring(0, selectedValues.length - 1);
selectedTexts = selectedTexts.substring(0, selectedTexts.length - 2);
document.getElementById("testInput").value = selectedValues;
document.getElementById("testArea").value = selectedTexts;
}
function showSelect(){
var divObj = document.getElementById("selectDiv");
var ulObj = document.getElementById("selectUl");
if(ulObj.style.display == "block"){
ulObj.style.display = "none";
} else {
ulObj.style.width = divObj.offsetWidth - 2 + "px";
ulObj.style.display = "block";
}
}
document.onkeydown = function(event){
var e
