原生html+js输入框下拉多选带关闭模块完整案例

devtools/2024/11/13 8:05:31/
htmledit_views">

 

html"><!DOCTYPE html>
<html>
<head>
<title>多选下拉框</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.multi-select-container {
position: relative;
width: 300px;
margin: 20px;
font-family: Arial, sans-serif;
}
.multi-select-input {
width: 100%;
min-height: 40px;
padding: 5px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
}
.multi-select-input:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
}
.selected-item {
display: inline-flex;
align-items: center;
background: #e8f5e9;
border: 1px solid #4CAF50;
border-radius: 3px;
padding: 2px 8px;
margin: 2px;
font-size: 14px;
}
.remove-btn {
margin-left: 5px;
color: #666;
cursor: pointer;
font-size: 14px;
padding: 0 3px;
}
.remove-btn:hover {
color: #f44336;
}
.dropdown-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
margin-top: 5px;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.dropdown-item {
padding: 8px 12px;
cursor: pointer;
display: flex;
align-items: center;
}
.dropdown-item:hover {
background-color: #f5f5f5;
}
.dropdown-item.selected {
background-color: #e8f5e9;
color: #4CAF50;
}
.dropdown-item input[type="checkbox"] {
margin-right: 8px;
}
.limit-message {
color: #f44336;
font-size: 12px;
margin-top: 5px;
display: none;
}
/* 自定义滚动条 */
.dropdown-list::-webkit-scrollbar {
width: 6px;
}
.dropdown-list::-webkit-scrollbar-track {
background: #f1f1f1;
}
.dropdown-list::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
.dropdown-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body>
<div class="multi-select-container">
<div class="multi-select-input" id="selectInput" tabindex="0">
<span class="placeholder">请选择分类...</span>
</div>
<div class="dropdown-list" id="dropdownList"></div>
<div class="limit-message">最多只能选择3个选项</div>
</div>
<script>
class MultiSelect {
constructor(options = {}) {
this.maxSelect = options.maxSelect || 3;
this.container = document.querySelector('.multi-select-container');
this.input = document.getElementById('selectInput');
this.dropdown = document.getElementById('dropdownList');
this.limitMessage = document.querySelector('.limit-message');
this.placeholder = this.input.querySelector('.placeholder');
this.selectedItems = new Set();
// 示例数据
this.items = options.items || [
{ id: 1, name: '技术' },
{ id: 2, name: '设计' },
{ id: 3, name: '产品' },
{ id: 4, name: '运营' },
{ id: 5, name: '市场' },
{ id: 6, name: '销售' },
{ id: 7, name: '客服' },
{ id: 8, name: '人力资源' }
];
this.init();
}
init() {
this.renderDropdown();
this.bindEvents();
}
renderDropdown() {
this.dropdown.innerHTML = this.items.map(item => `
<div class="dropdown-item" data-id="${item.id}">
<input type="checkbox" id="item${item.id}" ${this.selectedItems.has(item.id) ? 'checked' : ''}>
<label for="item${item.id}">${item.name}</label>
</div>
`).join('');
}
updateSelectedDisplay() {
const selectedHtml = Array.from(this.selectedItems).map(id => {
const item = this.items.find(i => i.id === id);
return `
<span class="selected-item" data-id="${id}">
${item.name}
<span class="remove-btn" data-id="${id}">×</span>
</span>
`;
}).join('');
this.input.innerHTML = selectedHtml || '<span class="placeholder">请选择分类...</span>';
}
toggleDropdown(show) {
this.dropdown.style.display = show ? 'block' : 'none';
if (show) {
this.renderDropdown();
}
}
bindEvents() {
// 点击输入框显示下拉列表
this.input.addEventListener('click', () => {
this.toggleDropdown(true);
});
// 点击其他地方关闭下拉列表
document.addEventListener('click', (e) => {
if (!this.container.contains(e.target)) {
this.toggleDropdown(false);
}
});
// 选择项目
this.dropdown.addEventListener('click', (e) => {
const item = e.target.closest('.dropdown-item');
if (!item) return;
const id = parseInt(item.dataset.id);
const checkbox = item.querySelector('input[type="checkbox"]');
if (this.selectedItems.has(id)) {
this.selectedItems.delete(id);
checkbox.checked = false;
} else {
if (this.selectedItems.size >= this.maxSelect) {
this.showLimitMessage();
return;
}
this.selectedItems.add(id);
checkbox.checked = true;
}
this.updateSelectedDisplay();
e.stopPropagation();
});
// 删除已选项
this.input.addEventListener('click', (e) => {
if (e.target.classList.contains('remove-btn')) {
const id = parseInt(e.target.dataset.id);
this.selectedItems.delete(id);
this.updateSelectedDisplay();
this.renderDropdown();
e.stopPropagation();
}
});
}
showLimitMessage() {
this.limitMessage.style.display = 'block';
setTimeout(() => {
this.limitMessage.style.display = 'none';
}, 2000);
}
// 获取选中的值
getSelected() {
return Array.from(this.selectedItems).map(id =>
this.items.find(item => item.id === id)
);
}
}
// 初始化
const multiSelect = new MultiSelect({
maxSelect: 3,
items: [
{ id: 1, name: '技术' },
{ id: 2, name: '设计' },
{ id: 3, name: '产品' },
{ id: 4, name: '运营' },
{ id: 5, name: '市场' },
{ id: 6, name: '销售' },
{ id: 7, name: '客服' },
{ id: 8, name: '人力资源' }
]
});
</script>
</body>
</html>

 


http://www.ppmy.cn/devtools/132882.html

相关文章

JAVA题目笔记(十三) 爬虫

一、网络爬取 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.net.URL; import java.net.URLConnection; import java.util.regex.Matcher; import java.util.regex.Pattern;public class Main {public static v…

千帆模型gpt智能聊天机器人

首先是调用接口,需要调用的接口ACCESS_KEY和SECRET_KEY # codingutf-8 import os import qianfandef gpt(question):with open("QIANFAN_ACCESS_KEY",r,encodingutf-8) as f:QIANFAN_ACCESS_KEY f.read()with open("QIANFAN_SECRET_KEY","r",e…

qt QHttpMultiPart详解

1. 概述 QHttpMultiPart是Qt框架中用于处理HTTP多部分请求的类。它类似于RFC 2046中描述的MIME multipart消息&#xff0c;允许在单个HTTP请求中包含多个数据部分&#xff0c;如文件、文本等。这种多部分请求在上传文件或发送带有附件的邮件等场景中非常有用。QHttpMultiPart类…

MongoDB笔记01-概念与安装

文章目录 前言一、MongoDB相关概念1.1 业务应用场景具体的应用场景什么时候选择MongoDB 1.2 MongoDB简介1.3 体系结构1.4 数据模型1.5 MongoDB的特点 二、本地单机部署2.1 Windows系统中的安装启动第一步&#xff1a;下载安装包第二步&#xff1a;解压安装启动1.命令行参数方式…

基于STM32的hx711称重模块使用

欢迎入群共同学习交流 时间记录&#xff1a;2024/11/9 一、知识点记录 1、hx711 1&#xff09;HX711是一款高精度压力传感器专用的24位模数转换芯片&#xff0c;主要功能是将测得的微小电压信号放大到可以被微控制器读取的范围 2&#xff09;工作电压2.6-5.5V 3&#xff09;引…

达梦8数据库适配ORACLE的8个参数

目录 1、概述 1.1 概述 1.2 实验环境 2、参数简介 3、实验部分 3.1 参数BLANK_PAD_MODE 3.2 参数COMPATIBLE_MODE 3.3 参数ORDER_BY_NULLS_FLAG 3.4 参数DATETIME_FMT_MODE 3.5 参数PL_SQLCODE_COMPATIBLE 3.6 参数CALC_AS_DECIMAL 3.7 参数ENABLE_PL_SYNONYM 3.8…

OpenGL学习笔记(四) RGBA颜色

RGBA模式中&#xff0c;每一个像素会保存以下数据&#xff1a;R值&#xff08;红色分量&#xff09;、G值&#xff08;绿色分量&#xff09;、B值&#xff08;蓝色分量&#xff09;和A值&#xff08;alpha分量&#xff09;。其中红、绿、蓝三种颜色相组合&#xff0c;就可以得到…

Flutter 中 Provider 的使用指南

目录 1.什么是 Provider 2.如何安装 Provider 3.基本使用方式 1.使用ChangeNotifierProvider提供状态 2.使用 Provider.of 手动读取状态 3.多Provider 的使用 4.常见的 Provider 类型 在 Flutter 开发中&#xff0c;状态管理是一个常见的需求。Provider 是 Flutter 官方…