前端下拉框select标签的插件——select2.js
本文采用的是select2 版本：Select2 4.0.6-rc.1。
可以兼容IE8及以上。亲测过。
官网：Getting Started | Select2 - The jQuery replacement for select boxes
一、认识select2.js
1、使用插件，首先要引入别人的插件了，你可以选择离线（无网络）或者在线引用的（如果有网络）。
在线引用如下所示：
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>离线引用如下所示：注意自己的引用路径哦
<link type="text/css" rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
<script type="text/javascript" src="../../plugins/select2/js/select2.js"></script>2、先将弹出框做出来，你可以模拟数据或者从后台将数据查询出来，进行操作。
<!-- 选择你想要的那条数据哦 -->
<div id="dbName" style="display: none;"><form class="form-horizontal setWidth" id="dbNameContent" name="dbNameContent"><div class="form-group" style="width: 90%"><label for="dbNameCategory" class="col-sm-3 control-label">xxx库<font color='red'>✲</font></label><div class="col-sm-9" style="padding: 0px;"><select class="form-control width175" id="dbNameCategory" name="dbNameCategory"><option value='0'>-- 请选择 --</option></select></div></div></form>
</div>将弹出框先做出来，然后呢。弹出框里面的数据，我是从后台查询出来的，放到select选择框里面的，你可以根据自己的需求来做哦。
3、初始化select2。
<script type="text/javascript">
$(function(){$.ajax({type : 'post',url : "xxxAction!findxxx.action",dataType : 'json',error : function(request, textStatus,errorThrown) {fxShowAjaxError(request, textStatus,errorThrown);},success : function(data) {//console.log(data.result);var result = data.result;for(var i=0;i<result.length;i++){$("#dbNameCategory").append("<option value='"+ result[i].id +"'>" + result[i].alias + "</opstion>");}}})//初始化select2，关键点在于，将select下拉框里面的id进行定义然后初始化select2$("#jobdbNameCategory").select2();
});
</script>更多其他的功能可以根据自己的需求进行开发使用。
4、模拟的使用select2插件进行下拉框来进行自动补全。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基本实例</title>
<!--
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
--><link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jQuery-2.1.3.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/select2.min.css">
<script type="text/javascript" src="js/select2.min.js"></script><script type="text/javascript">//页面加载完成后初始化select2控件$(function () {$("#area").select2();});// select2()函数可添加相应配置：$('#area').select2({placeholder: '请选择区域'});//选中控件id="area"、value="1"的元素function findByName(){//初始化select2var areaObj = $("#area").select2();var optionVal = 1;areaObj .val(optionVal).trigger("change");areaObj .change();}</script>
</head>
<body><div align="center" style="padding-top:100px;">
<span>省份或直辖市：</span><select id="area" class="select2" style="width:300px;"><option value="0" selected="selected">请选择区域省或直辖市</option><option value="1">浙江省</option><option value="2">广东省</option><option value="3">上海市</option><option value="4">贵州省</option><option value="5">江苏省</option><option value="6">山东省</option><option value="7">重庆市</option><option value="8">四川省</option><option value="9">安徽省</option><option value="10">北京市</option><option value="11">天津市</option><option value="12">河北省</option><option value="13">山西省</option><option value="14">内蒙省</option><option value="15">辽宁省</option><option value="16">吉林省</option><option value="17">黑龙江省</option><option value="18">福建省</option><option value="19">江西省</option><option value="20">河南省</option><option value="21">湖北省</option><option value="22">湖南省</option><option value="23">广西省</option><option value="24">海南省</option><option value="25">云南省</option><option value="26">西藏省</option><option value="27">陕西省</option><option value="28">甘肃省</option><option value="29">青海省</option><option value="30">宁夏省</option><option value="31">新疆省</option></select>
</div></body>
</html>效果如下所示：
二、遇到的问题
本人新手，初次使用select2组件，遇到很多难题，记录下来。
<select id="selectID"></select>问题1：如何获取select2已选择的数值？
答案：
$('#selectID').select2('data');问题2：如何给select2赋值？
答案： $('#selectID').val(new_value).select2();
问题3：如何重新初始化select2选项，比如动态获取数据然后更新select2数据？
答案： $('#selectID').empty();
$('#selectID').select2({
tags: true,
placeholder: '请选择版本',
data: data,
multiple:true,
allowClear: true
})
问题4：如何获取select2选中的选项的属性，比如id？
答案： $('selectID').find('option:checked').attr('id');
三、常用功能说明
1.常用参数设置含义
tags: true, // 根据搜索框创建option，默认false
maximumSelectionLength: 6, // 最多能够选择的个数
multiple: true, // 多选，默认false
data: initdata, // 下拉框绑定的数据
allowClear: true, // 清空，默认false
placeholder: '请添加或选择语言' // 占位提示符
maximumInputLength: 20, // 允许搜索长度
minimumResultsForSearch: 20, // 至少20个结果的时候显示搜索
minimumResultsForSearch: Infinity, // 永久隐藏搜索框
selectOnClose: true, // 结果显示高亮
closeOnSelect: false, // select选中关闭下拉框
separator: ",", // 分隔符 2.select2事件：
//置空
$eventSelect.val(null).trigger("change");
//选中
$eventSelect.on("selected", function (e) { })
//移除
$eventSelect.on("removed", function () { })
//多个事件
$eventSelect.on("close removed", function () { }) 3.获取value和text
$("#xa").val();
$("#xa").select2("val");
$("#xa").select2('data').text ;四、测试源码示例
1.select2Test.html代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>select2</title>
</head>
<body><link href="../../plugins/select2/css/select2.css" rel="stylesheet" /><div><label style="width: 100px; font-size: 14px;">单选</label><select id="sel_menu" style="width: 400px;" ><option value=""></option></select></div><div style="margin-top:20px;"><label style=" width: 100px; font-size: 14px;">多选</label><select id="sel_menu2" multiple="multiple" style="width: 400px;"></select></div><div style="margin-top:20px;"><label style="width: 100px; font-size: 14px;">多选(含选中项)</label><select id="sel_menu3" multiple="multiple" style="width: 400px;"></select></div><button onclick=getSelectedData() style ="margin-top: 20px;">多选选中值</button><script src="../../plugins/jquery-2.0.3.min.js"></script><script src="../../plugins/select2/js/select2.js"></script><script src="../../plugins/pinyin/pinyin.js"></script><script src="../../js/select2Test.js"></script>
</body>
</html>2.select2Test.js代码：
//下拉框数据
var initdata = ["Java", "JavaScript", "C++", "C#", "Python", "PHP"];
//选中数据
var selectedData = ["Java", "PHP"];//初始化页面加载
$(document).ready(function () {//初始化select2单选initSelect2WithSearch();//初始化select2多选（没有选中项）initSelect2();//初始化select2多选（包含选中项）select2WithData(selectedData);
});/*** 初始化select2单选，默认带搜索功能。*/
function initSelect2WithSearch() {$("#sel_menu").select2({tags: true,placeholder: '请搜索或选择语言',data: initdata,allowClear: true});
}
/*** 初始化select2多选（没有选中项）*/
function initSelect2() {$("#sel_menu2").select2({tags: true,maximumSelectionLength: 5,placeholder: '请添加或选择语言',multiple: true,maximumInputLength: 10,//允许长度 data: initdata,});
}/*** 初始化select2多选（包含选中项）*/
function select2WithData(selectedData) {$("#sel_menu3").select2({tags: true, //支持新增，默认为falsemaximumSelectionLength: 6, //最多能够选择的个数multiple: true, //支持多选，默认为falsedata: initdata, //下拉框绑定的数据allowClear: true, //支持清空，默认为falseplaceholder: '请添加或选择语言' //提示语}).val(selectedData).trigger('change'); //多选情况下给选中项的赋值
}/*** 获取多选框选中项的值*/
function getSelectedData() {var mulSelData = $("#sel_menu3").val().join(",");//获取多选输入框选中值的方式alert("sel_menu3的选中项是：" + mulSelData);
}3.运行结果： 
参考：Select2.js学习总结 - 程序员大本营 (pianshen.com)
亲测代码
<%--Created by IntelliJ IDEA.Date: 2023/11/29Time: 23:57To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="../js/select2.js"></script><link rel="stylesheet" href="../css/select2.css"><style>.input-select,.select2{width:200px;}</style>
</head>
<body><select id="ab" class="input-select"><option value="" >请选择数据</option><option value="a">aaaaaa</option><option value="b">bbbbbb</option></select><br><span>区域：</span><select id="area" class="select2"><option value="" selected="selected">请选择区域</option><option value="1">珠海</option><option value="2">深圳</option><option value="3">澳门</option><option value="4">香港</option></select></body>
</html><script>$(document).ready(function(){$(".input-select").select2({allowClear:true,placeholder: '请添加或选择语言'});
});
</script><script type="text/javascript">//页面加载完成后初始化select2控件$(function () {//select2()函数可添加相应配置：$('#area').select2({placeholder: '请选择区',allowClear:true});//初始化select2/* var areaObj = $("#area").select2();var optionVal = 1;areaObj.val(optionVal).trigger("change");areaObj.change();*/});</script>
效果图
相关文章：
前端下拉框select标签的插件——select2.js
本文采用的是select2 版本：Select2 4.0.6-rc.1。 可以兼容IE8及以上。亲测过。 官网：Getting Started | Select2 - The jQuery replacement for select boxes 一、认识select2.js 1、使用插件，首先要引入别人的插件了，你可以选…...
【MySQL的基本命令{DML 和 DDL}】
MySQL的基本命令 {DML 和 DDL} MySQL的基本命令展示所有数据库展示某个数据库中所有的表切换到某个数据库查看当前在哪个数据库查询一张表的全部数据新建一个数据库新建一张表插入一条数据删除一个表删除一个库描述表的信息展示表的创建sql代码展示库的创建sql代码导出数据 &am…...
unity3d模型中缺失animation
在 模型的Rig-Animationtype 设置成Legacy https://tieba.baidu.com/p/2293580178...
搭建自己的wiki知识库【转】
有前端基础，会Markdown、会HTML和CSS，选择 Hexo 有Vue基础可以选择 vuePress 或者 vitePress 会Go可以选择 Hugo 会Rust可以选择 Zola 会Ruby可以选择 Jekyll 会PHP可以考虑使用 WordPress 其他开源项目：docsify、GitBook 详见：如…...
【笔记】常用的Linux命令之解压缩：tar、zip、rar 命令
1、tar 常用压缩和解压缩 # 压缩文件 file1 和目录 dir2 到 test.tar.gz tar -zcvf test.tar.gz file1 dir2 # 解压 test.tar.gz（将 c 换成 x 即可） tar -zxvf test.tar.gz 额外知识：查看压缩文件内容 # 列出压缩文件的内容 tar -ztvf test…...
谈谈MYSQL索引
基本介绍 索引是帮助MySQL高效获取数据的数据结构，主要是用来提高数据检索的效率，降低数据库的IO成本，同时通过索引列对数据进行排序，降低数据排序的成本，也能降低了CPU的消耗。 通俗来说, 索引就相当于一本书的目录,…...
线程中出现异常的处理
目录 前言 正文 1.线程出现异常的默认行为 2.使用 setUncaughtExceptionHandler() 方法进行异常处理 3.使用 setDefaultUncaughtExceptionHandler() 方法进行异常处理 4.线程组内处理异常 5.线程异常处理的优先性 总结 前言 在紧密交织的多线程环境中，异…...
点击元素以外的事件监听
在项目中，我们经常会遇到需要监听目标元素以外的区域被点击或鼠标移入移出等需求。 例如下面我们有一个表格里面嵌套表单的组件 我希望点击n行的时候，n行的元素变成表单元素进行输入或者选择， 当我点击其他其他区域n行又会恢复成数据展示…...
猫头虎分享ubuntu20.04下VSCode无法输入中文解决方法
🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学！欢迎大家来踩踩~🌺 &a…...
tcpdump使用心得
参考原文 https://danielmiessler.com/p/tcpdump/ 几个用例 tcpdump -i eth0 显示eth0网卡当前所有的抓包情况eth0是网卡名，可以通过ifconfig获得，也可以通过 tcpdump -D 显示当前可以监听的网卡 -i 参数表示接口，后跟要监听的网卡 tcpdu…...
QJsonObject 是 Qt 框架中用于表示 JSON 对象的类
QJsonObject 是 Qt 框架中用于表示 JSON 对象的类。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于在不同平台和语言之间传输和存储数据。QJsonObject 类提供了一种方便的方式来创建、解析和操作 JSON 对象。 以下是…...
kafka3.6.0部署
部署zk https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/zookeeper-3.9.1/apache-zookeeper-3.9.1.tar.gz tar -xf apache-zookeeper-3.9.1.tar.gz -C /apps cd /apps/ && ln -s apache-zookeeper-3.9.1 zookeeper 修改配置bash grep -vE ^$|^# conf/zo…...
MybatisPlus批量插入（伪批量），增强为真实批量插入
项目基于优秀开源项目：若依 项目背景：项目中牵扯到数据批量导入，为提高性能，先考虑将MybatisPlus伪批量插入增强为真实批量插入 MybatisPlus源码： MybatisPlus支持批量插入，但是跟踪源码发现底层是将批量…...
【零基础入门Python】Python If Else流程控制
✍面向读者：所有人 ✍所属专栏：零基础入门Pythonhttps://blog.csdn.net/arthas777/category_12455877.html Python if语句 Python if语句的流程图 Python if语句示例 Python If-Else Statement Python if else语句的流程图 使用Python if-else语句 …...
新手零基础学习彩铅画，彩铅快速入门教程合集
一、教程描述 画画是很美好的一件事情，你可以把你想到的，或者看到的都画下来，照相机可以拍下任何你看到的，但是你想到的任何事物，只能通过绘画的方式来表达。本套教程是非常不错的，彩铅的小视频教程&#…...
线程池的拒绝策略
文章目录 线程池的拒绝策略AbortPolicy拒绝策略：CallerRunsPolicy拒绝策略：DiscardOldestPolicy拒绝策略：DiscardPolicy拒绝策略： 线程池的拒绝策略 若在线程池当中的核心线程数已被用完且阻塞队列已排满，则此时线程池…...
Redis7--基础篇5（管道、发布订阅）
管道是什么 管道(pipeline)可以一次性发送多条命令给服务端，服务端依次处理完完毕后，通过一条响应一次性将结果返回，通过减少客户端与redis的通信次数来实现降低往返延时时间。pipeline实现的原理是队列，先进先出特性就保证数据的…...
Unity中Shader指令优化（编译后指令解析）
文章目录 前言一、我们先创建一个简单的Shader二、编译这个Shader，并且打开1、编译后注意事项2、编译平台 和 编译指令数3、顶点着色器用到的信息4、顶点着色器计算的核心部分5、片元着色器用到的信息6、片元着色器核心部分 前言 我们先读懂Shader编译后代码&#…...
单个 Zip 文件体积超过 40GB
单个 Zip 文件体积超过 40GB WinRAR 平时用的多,不过有时候为了更好的通用性,也常常用到 zip 格式.查了一下资料,说是 zip 单个文件的体积不能超过 4GB. 自己动手试了下,用 WinRAR 创建出来的 zip 文件,大小可以超过 40GB, 如下图 为了压缩速度快,压缩方式用的是 “存储” Wi…...
pandas 基础操作3
数据删减 虽然我们可以通过数据选择方法从一个完整的数据集中拿到我们需要的数据，但有的时候直接删除不需要的数据更加简单直接。Pandas 中，以 .drop 开头的方法都与数据删减有关。 DataFrame.drop 可以直接去掉数据集中指定的列和行。一般在使用时&am…...
三维GIS开发cesium智慧地铁教程（5）Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点： 路径验证：确保相对路径.…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及，充电桩作为核心配套设施，其安全性与可靠性备受关注。然而，在高温、高负荷运行环境下，充电桩的散热问题与消防安全隐患日益凸显，成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈，并不断增加特征维度持续测试」的做法，体现了一种逐步建模与迭代验证的实验思路，在金融欺诈检测中非常有价值，本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
渗透实战PortSwigger靶场：lab13存储型DOM XSS详解
进来是需要留言的，先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码，输入的<>当成字符串处理回显到页面中，看来只是把用户输…...
C++_哈希表
本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说，直接开始吧！ 一、基础概念 1. 哈希核心思想： 哈希函数的作用：通过此函数建立一个Key与存储位置之间的映射关系。理想目标：实现…...
在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南
在RK3588上搭建ROS1环境：创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点（小球运动模拟）6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...
32位寻址与64位寻址
32位寻址与64位寻址 32位寻址是什么？ 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元（地址），其核心含义与能力如下： 1. 核心定义 地址位宽：CPU或内存控制器用32位…...
Python异步编程：深入理解协程的原理与实践指南
💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 持续学习，不断…...