1. 简单一点首页
  2. 编程

HTML多选下拉框的详细解析

SNZO • • 编程

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

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