jQuery自定义多选下拉框效果

来讲解一下“jQuery自定义多选下拉框效果”的攻略。

1. 确定实现思路

首先，我们需要明确所需实现的效果。下拉框的基本原理是列表显示，我们需要将列表生成后通过CSS隐藏，在点击下拉按钮的时候再通过动态修改CSS的方式来影响下拉列表的显示和隐藏。而自定义多项选择则需要在下拉框的基础上做进一步拓展，在下拉框的列表项前面添加一个复选框，实现多项选择。

2. 代码实现

下面是代码实现的详细步骤：

在HTML文件中添加下拉框及列表

<select id="select" multiple>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
    <option value="option4">选项4</option>
    <option value="option5">选项5</option>
</select>

在CSS文件中对下拉框和下拉列表进行样式设置

/* 下拉框样式设置 */
#select {
    width: 200px;
    height: 30px;
    appearance: none; /* 去除默认下拉框样式 */
    outline: none; /* 去除点击时的外边框 */
    background: url("下拉按钮.png") no-repeat right center; /* 添加下拉按钮 */
    background-size: 25px 25px;
    border: 1px solid #ccc;
}
/* 下拉列表样式设置 */
.dropdown {
    width: 200px;
    max-height: 150px;
    overflow-y: scroll;
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: 1px solid #ccc;
    position: absolute;
    display: none; /* 下拉列表默认隐藏 */
    z-index: 999;
}
.dropdown li {
    padding: 5px 10px;
    cursor: pointer;
}
.dropdown li:hover {
    background-color: #f6f6f6;
}

使用jQuery添加下拉框展开和收缩的事件

$('#select').click(function () {
  if ($('.dropdown').is(':hidden')) {
    $('.dropdown').show();
  } else {
    $('.dropdown').hide();
  }
});

动态生成下拉列表和复选框，并实现多选功能

//动态生成下拉列表
$("#select option").each(function () {
    var t = $(this).val();
    var n = $(this).text();
    var li = "<li><input type='checkbox' value='" + t + "'/>" + n + "</li>";
    $(".dropdown").append(li);
});
//为checkbox添加点击事件
$(".dropdown input[type='checkbox']").click(function () {
    //取得所有选中的checkbox的值，然后组合为字符串，赋值给select
    var selected = "";
    $(".dropdown input[type='checkbox']:checked").each(function () {
        selected += $(this).val() + ",";
    });
    selected = selected.substring(0, selected.length - 1);
    $("#select").val(selected);
    //实现多选框的拼接效果
    var bubbleText = "";
    $(".dropdown input[type='checkbox']:checked").each(function () {
        bubbleText += $(this).parent().text() + ",";
    });
    bubbleText = bubbleText.substring(0, bubbleText.length - 1);
    $("#select").next().text(bubbleText);
});

3. 示例说明

下面是两个示例，第一个是单选的下拉框，第二个是多选的下拉框。

示例1 - 单选下拉框

<!DOCTYPE html>
<html>
<head>
    <title>自定义单选下拉框效果</title>
    <meta charset="utf-8">
    <style>
        #select {
            width: 200px;
            height: 30px;
            appearance: none; /* 去除默认下拉框样式 */
            outline: none; /* 去除点击时的外边框 */
            background: url("img/arrow.png") no-repeat right center; /* 添加下拉按钮 */
            background-size: 30px 30px;
            border: 1px solid #ccc;
            position: relative; /* 定位父元素 */
        }
        .dropdown {
            width: 200px;
            max-height: 150px;
            overflow-y: scroll;
            list-style: none;
            margin: 0px;
            padding: 0px;
            border: 1px solid #ccc;
            position: absolute;
            display: none; /* 下拉列表默认隐藏 */
            z-index: 999;
            top: 30px; /* 让下拉框在下拉按钮下方出现 */
            background-color: #fff;
        }
        .dropdown li {
            padding: 5px 10px;
            cursor: pointer;
        }
        .dropdown li:hover {
            background-color: #f6f6f6;
        }
    </style>
</head>
<body>
    <select id="select">
        <option value="" hidden>请选择</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
        <option value="option4">选项4</option>
        <option value="option5">选项5</option>
    </select>
    <ul class="dropdown">
        <li value="option1">选项1</li>
        <li value="option2">选项2</li>
        <li value="option3">选项3</li>
        <li value="option4">选项4</li>
        <li value="option5">选项5</li>
    </ul>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
        $('#select').click(function(event) {
            event.stopPropagation(); // 阻止事件冒泡
            if ($('.dropdown').is(':hidden')) {
                $('.dropdown').show();
            } else {
                $('.dropdown').hide();
            }
        });
        $('.dropdown li').click(function() {
            $('.dropdown').hide(); // 点击后隐藏下拉框
            $('#select').val($(this).attr('value'));
            $('#select').next().text($(this).text());
        });
    </script>
</body>
</html>

示例2 - 多选下拉框

<!DOCTYPE html>
<html>
<head>
    <title>自定义多选下拉框效果</title>
    <meta charset="utf-8">
    <style>
        #select {
            width: 200px;
            height: 30px;
            appearance: none; /* 去除默认下拉框样式 */
            outline: none; /* 去除点击时的外边框 */
            background: url("img/arrow.png") no-repeat right center; /* 添加下拉按钮 */
            background-size: 30px 30px;
            border: 1px solid #ccc;
            position: relative; /* 定位父元素 */
        }
        .bubble {
            display: inline-block;
            max-width: calc(100% - 28px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-right: 5px;
            position: absolute;
            left: 5px;
            top: 5px;
        }
        .bubble:after {
            content: "";
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
            height: 0;
            width: 0;
            border-top: 6px solid #ccc;
            border-bottom: 6px solid transparent;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            position: relative;
            top: -1px;
        }
        .dropdown {
            width: 200px;
            max-height: 150px;
            overflow-y: scroll;
            list-style: none;
            margin: 0px;
            padding: 0px;
            border: 1px solid #ccc;
            position: absolute;
            display: none; /* 下拉列表默认隐藏 */
            z-index: 999;
            top: 30px; /* 让下拉框在下拉按钮下方出现 */
            background-color: #fff;
        }
        .dropdown li {
            padding: 5px 10px;
            cursor: pointer;
        }
        .dropdown li:hover {
            background-color: #f6f6f6;
        }
        .dropdown input[type='checkbox'] {
            margin-right: 5px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <select id="select" multiple>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
        <option value="option3">选项3</option>
        <option value="option4">选项4</option>
        <option value="option5">选项5</option>
    </select>
    <div class="bubble"></div>
    <ul class="dropdown">
    </ul>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
        //动态生成下拉列表
        $("#select option").each(function () {
            var t = $(this).val();
            var n = $(this).text();
            var li = "<li><input type='checkbox' value='" + t + "'/>" + n + "</li>";
            $(".dropdown").append(li);
        });
        //为checkbox添加点击事件
        $(".dropdown input[type='checkbox']").click(function () {
            //取得所有选中的checkbox的值，然后组合为字符串，赋值给select
            var selected = "";
            $(".dropdown input[type='checkbox']:checked").each(function () {
                selected += $(this).val() + ",";
            });
            selected = selected.substring(0, selected.length - 1);
            $("#select").val(selected);
            //实现多选框的拼接效果
            var bubbleText = "";
            $(".dropdown input[type='checkbox']:checked").each(function () {
                bubbleText += $(this).parent().text() + ",";
            });
            bubbleText = bubbleText.substring(0, bubbleText.length - 1);
            $(".bubble").text(bubbleText);
        });
        //下拉按钮的click事件
        $("#select").next().click(function(event) {
            event.stopPropagation(); // 阻止事件冒泡
            if ($('.dropdown').is(':hidden')) {
                $('.dropdown').show();
            } else {
                $('.dropdown').hide();
            }
        });
    </script>
</body>
</html>

以上就是“jQuery自定义多选下拉框效果”的完整攻略，希望对你有帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery自定义多选下拉框效果 - Python技术站