当前位置：首页 > backend >正文

利用jQuery 实现多选标签下拉框，提升表单交互体验

backend 2025/5/6 5:18:40

在 Web 开发中，表单设计常常需要支持用户选择多个选项的场景。传统的多选框或下拉菜单在处理大量选项时，可能会影响界面美观和操作便捷性。这时，多选标签下拉框就成为了一种优雅的解决方案。本文将详细介绍如何通过 HTML、CSS 和 jQuery 实现一个功能丰富的多选标签下拉框。

一、实现效果与应用场景

最终实现的多选标签下拉框效果如下：点击下拉按钮后，会弹出包含多个选项的下拉菜单，每个选项带有复选框，用户可以自由勾选。已选的选项会以标签形式展示在下拉按钮中，并且每个标签都带有删除按钮，方便用户随时取消选择。这种设计适用于项目标签筛选、兴趣爱好选择、权限配置等多种需要多选操作的业务场景。

效果图：

二、HTML 结构搭建

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="js/jquery-3.7.1.min.js"></script><title>多选标签下拉框</title><style>/* 样式代码将在下文CSS部分详细说明 */</style>
</head><body><div class="multiselect-dropdown"><!-- 下拉按钮 - 已选标签将显示在这里 --><button class="dropdown-button" id="dropdownButton"><span class="placeholder" id="placeholder">选择标签...</span><span class="arrow">▼</span></button><!-- 标签选项容器 --><div class="dropdown-content" id="dropdownContent"><!-- 标签选项将通过JS动态生成 --></div></div><script>// JavaScript实现代码将在下文JavaScript部分详细说明</script>
</body></html>

上述代码构建了多选标签下拉框的基础结构：

外层div（类名为multiselect-dropdown）作为下拉框的整体容器。
button（类名为dropdown-button，id为dropdownButton）是下拉按钮，用于触发下拉菜单的显示与隐藏，并展示已选标签。
内部div（类名为dropdown-content，id为dropdownContent）用于存放具体的选项内容，选项将通过 JavaScript 动态生成。

三、CSS 样式设计

/* 基础样式 */
body {font-family: 'Arial', sans-serif;padding: 20px;
}/* 下拉框容器 */
.multiselect-dropdown {position: relative;width: 300px;
}/* 下拉按钮 */
.dropdown-button {width: 100%;min-height: 40px;padding: 5px 15px;border: 1px solid #ddd;border-radius: 4px;background-color: white;text-align: left;cursor: pointer;display: flex;flex-wrap: wrap;align-items: center;gap: 5px;
}/* 下拉箭头图标 */
.arrow {transition: transform 0.3s;margin-left: auto;
}.arrow.open {transform: rotate(180deg);
}/* 标签选项容器 */
.dropdown-content {display: none;position: absolute;width: 100%;max-height: 200px;overflow-y: auto;border: 1px solid #ddd;border-radius: 4px;background-color: white;z-index: 1000;margin-top: 5px;
}/* 标签选项 */
.tag-option {padding: 8px 15px;cursor: pointer;display: flex;align-items: center;
}.tag-option:hover {background-color: #f5f5f5;
}/* 复选框样式 */
.tag-checkbox {margin-right: 10px;
}/* 已选标签样式 - 在下拉按钮中显示 */
.selected-tag {background-color: #e0e0e0;padding: 2px 8px;border-radius: 12px;font-size: 12px;display: flex;align-items: center;
}/* 删除标签按钮 */
.remove-tag {margin-left: 5px;cursor: pointer;color: #666;
}.remove-tag:hover {color: #333;
}/* 占位文本 */
.placeholder {color: #999;
}

这段 CSS 代码对多选标签下拉框进行了细致的样式定义：

整体布局：为body设置基础字体和内边距，multiselect-dropdown容器设置相对定位和固定宽度。
下拉按钮：定义了按钮的尺寸、边框、背景、布局方式，以及箭头图标的旋转动画效果。
下拉菜单：dropdown-content设置为绝对定位，初始隐藏，添加滚动条和边框样式，确保选项过多时可滚动查看。
选项与标签：分别设计了选项的悬停效果、复选框样式，已选标签的背景、圆角，以及删除按钮的颜色和交互效果。

四、jQuery 功能实现

$(document).ready(function () {// 标签数据const tags = [{ id: 1, name: '前端开发' },{ id: 2, name: '后端开发' },{ id: 3, name: '移动开发' },{ id: 4, name: 'UI设计' },{ id: 5, name: '产品经理' },{ id: 6, name: '测试工程师' },{ id: 7, name: 'DevOps' },{ id: 8, name: '数据分析' }];// 已选标签let selectedTags = [];// 初始化下拉框function initDropdown() {$('#dropdownContent').empty();$.each(tags, function (index, tag) {const isSelected = $.grep(selectedTags, function (t) {return t.id === tag.id;}).length > 0;const option = $('<div>').addClass('tag-option');const checkbox = $('<input>', {type: 'checkbox',class: 'tag-checkbox',checked: isSelected,value: tag.id}).on('change', function () {toggleTag(tag);});const label = $('<label>').text(tag.name);option.append(checkbox, label);option.on('click', function (e) {if (e.target!== checkbox[0]) {checkbox.trigger('click');}});$('#dropdownContent').append(option);});}// 切换标签选择状态function toggleTag(tag) {const existingIndex = $.map(selectedTags, function (t, index) {return t.id === tag.id? index : null;})[0];if (existingIndex === undefined) {selectedTags.push(tag);} else {selectedTags.splice(existingIndex, 1);}updateButtonDisplay();}// 更新下拉按钮中显示的已选标签function updateButtonDisplay() {const button = $('#dropdownButton');const placeholder = $('#placeholder');button.contents().filter(function () {return!$(this).hasClass('placeholder') &&!$(this).hasClass('arrow');}).remove();if (selectedTags.length === 0) {placeholder.show();} else {placeholder.hide();$.each(selectedTags, function (index, tag) {const tagElement = $('<span>').addClass('selected-tag').text(tag.name);const removeButton = $('<span>').addClass('remove-tag').text('×').data('tag-id', tag.id);tagElement.append(removeButton);tagElement.insertBefore($('.arrow'));});}}// 使用事件委托处理删除按钮点击$(document).on('click', '.remove-tag', function (e) {e.stopPropagation();const tagId = $(this).data('tag-id');selectedTags = $.grep(selectedTags, function (tag) {return tag.id!== tagId;});updateButtonDisplay();initDropdown();});// 切换下拉框显示/隐藏$('#dropdownButton').on('click', function () {const isOpen = $('#dropdownContent').is(':visible');$('#dropdownContent').toggle(!isOpen);$('.arrow').toggleClass('open',!isOpen);});// 点击页面其他区域关闭下拉框$(document).on('click', function (event) {if (!$(event.target).closest('.multiselect-dropdown').length) {$('#dropdownContent').hide();$('.arrow').removeClass('open');}});// 初始化initDropdown();
});

上述 JavaScript 代码通过 jQuery 实现了多选标签下拉框的核心功能：

数据与状态初始化：定义了tags数组存储所有可选标签数据，selectedTags数组记录已选标签。
初始化下拉框：initDropdown函数负责清空下拉菜单内容，循环遍历tags数据，根据选项是否已选动态生成带有复选框的选项，并绑定点击事件。
标签选择切换：toggleTag函数处理复选框的选中与取消逻辑，更新selectedTags数组，并调用updateButtonDisplay函数刷新下拉按钮中的已选标签显示。
已选标签更新：updateButtonDisplay函数负责清空下拉按钮中的现有标签，根据selectedTags数组重新渲染已选标签，并添加删除按钮。
删除标签处理：通过事件委托监听.remove-tag的点击事件，移除对应的已选标签，更新显示并重新初始化下拉菜单选项。
下拉框显示控制：为下拉按钮绑定点击事件，实现下拉菜单的显示与隐藏切换，同时控制箭头图标的旋转；监听页面点击事件，当点击区域不在下拉框范围内时，自动关闭下拉菜单。