在 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的点击事件，移除对应的已选标签，更新显示并重新初始化下拉菜单选项。 - 下拉框显示控制：为下拉按钮绑定点击事件，实现下拉菜单的显示与隐藏切换，同时控制箭头图标的旋转；监听页面点击事件，当点击区域不在下拉框范围内时，自动关闭下拉菜单。
五、总结
通过 HTML、CSS 和 jQuery 的结合，我们成功实现了一个功能完备、交互友好的多选标签下拉框。这种设计不仅提升了表单的美观性和操作便捷性，还能适应多种业务场景的多选需求。开发者可以根据实际项目需要，对标签数据、样式和功能进行进一步的扩展与优化，为用户带来更好的使用体验。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
