HTML多选下拉框的详细解析

发布时间：2023-05-17

一、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>

实现原理：首先给<select>标签添加onchange事件，每当用户选择或取消选项时触发该事件。在事件处理函数中，遍历所有选项，将选中的选项的值和文本内容分别拼接成一个字符串，最后将这两个字符串分别赋值给一个隐藏域和一个<textarea>标签。

三、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>

实现原理：首先将<select>标签换成一个<input>标签，该标签用于显示用户已选择的选项名称；在下拉框中添加一个标签，每个选项用标签表示，并且在每个选项前添加一个<input type="checkbox">标签。当用户点击<input>标签时，显示下拉框，当用户勾选/取消勾选一个选项时，通过JavaScript动态修改<input>标签显示的内容。

四、layui多选下拉框的使用方法

layui是一款开源的前端UI框架，提供了一种简单易用的多选下拉框组件。以下是使用示例：

<select xm-select="demo">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
</select>
<script type="text/javascript" src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layer', 'jquery'], function() {
        var form = layui.form;
        form.render('select');
    });
</script>

实现原理：首先在<select>标签中添加xm-select="demo"属性，它表示将该下拉框转换成多选下拉框组件，demo是这个组件的唯一标识。在页面加载完成后，通过layui.use()方法依次加载form、layer和jquery三个模块，并调用form.render()方法将<select>标签转换成多选下拉框组件，从而实现多选下拉框的功能。

五、HTML下拉框选择怎么设置

HTML下拉框选择通常有两种方式：一是使用鼠标点击下拉框箭头，弹出选项列表，再点击选项名称选中；二是使用键盘上下箭头选择选项，回车键确定选择。以下是示例代码：

<select name="testSelect">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
</select>

其中，第一种方式是HTML自带的功能，无需任何JavaScript代码；第二种方式需要用到JavaScript，示例代码如下：

<script type="text/javascript">
    var selectIndex = 0;
    var selectObj = document.getElementsByName("testSelect")[0];
    // 用户按下了键盘上下箭头
    document.onkeydown = function(event){
        var e = event || window.event;
        switch(e.keyCode){
            // 上箭头
            case 38:
                selectIndex--;
                if(selectIndex < 0){
                    selectIndex = selectObj.options.length - 1;
                }
                selectObj.options[selectIndex].selected = true;
                break;
            // 下箭头
            case 40:
                selectIndex++;
                if(selectIndex > selectObj.options.length - 1){
                    selectIndex = 0;
                }
                selectObj.options[selectIndex].selected = true;
                break;
            // 回车键
            case 13:
                alert("你选择了：" + selectObj.options[selectIndex].text);
                break;
        }
    }
</script>

实现原理：首先获取<select>标签对象和选项的个数，然后监听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 = event || window.event;
        switch(e.keyCode){
            // 上箭头
            case 38:
                selectIndex--;
                if(selectIndex < 0){
                    selectIndex = selectObj.options.length - 1;
                }
                selectObj.options[selectIndex].selected = true;
                break;
            // 下箭头
            case 40:
                selectIndex++;
                if(selectIndex > selectObj.options.length - 1){
                    selectIndex = 0;
                }
                selectObj.options[selectIndex].selected = true;
                break;
            // 回车键
            case 13:
                alert("你选择了：" + selectObj.options[selectIndex].text);
                break;
        }
    }
</script>
推荐文章