Select2学习总结

本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、分组显示、按照拼音搜索功能。并通过测试示例对其效果进行了验证。
一、效果图

二、使用方式

1.使用前需要引入下面几个插件：
select2.css或者select2.min.css
select2.js或者select2.min.js
jquery-2.0.3.min.js

<link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
<script src="../../plugins/select2/js/select2.js"></script>
<script src="../../plugins/jquery-2.0.3.min.js"></script>

2.如果在使用select2单选搜索时想要能够按照拼音字母进行搜索，需要引入pinyin.js插件，并对select2.js源码进行修改。

<script src="../../plugins/pinyin/pinyin.js"></script>

pinyin.js下载地址：https://download.csdn.net/download/jianyuerensheng/10381102

select2.js文件修改方式：
将select2.js文件中下面这部分代码屏蔽掉

var original = stripDiacritics(data.text).toUpperCase();
var term = stripDiacritics(params.term).toUpperCase();
// Check if the text contains the term
if (original.indexOf(term) > -1) {return data;
}

并在上述屏蔽代码的下面添加以下代码：

//拼音搜索功能
if (stripDiacritics(data.text).toPinYin === undefined) {var original = stripDiacritics(data.text).toUpperCase();var term = stripDiacritics(params.term).toUpperCase();// Check if the text contains the termif (original.indexOf(term) > -1) {return data;}
} else {//以下为拼音搜索功能新增代码（4866行~4876行）var original = '';var original1 = '';var term = stripDiacritics(params.term).toUpperCase();if (stripDiacritics(data.text).toPinYin != undefined) {var result = stripDiacritics(data.text).toPinYin();original = result[0].indexOf(stripDiacritics(params.term).toUpperCase());original1 = result[1].indexOf(stripDiacritics(params.term).toUpperCase());if (original == -1 && original1 == -1) {original = stripDiacritics(data.text).toUpperCase().indexOf(term);}}// Check if the text contains the termif (original > -1 || original1 > -1) { //如果匹配则original为0return data;}
}

三、常用功能说明

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><div style="margin-top:20px;"><label style=" width: 100px; font-size: 14px;">分组显示</label><select id="sel_menu4"  style="width:400px;"></select>   </div>  <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"];
//分组下拉框数据（带ID）
var initGroupDataWithId=[{ "text": "熟悉的", "children": [{ "id": 1, "text": "Java" }, { "id": 2, "text": "JavaScript" }, { "id": 3, "text": "C#" }, { "id": 4, "text": "PHP" }] },{ "text": "不熟悉的", "children": [{ "id": 5, "text": "C++" }, { "id": 5, "text": "Python" }, { "id": 5, "text": "GO" }] }
];
//分组下拉框数据
var initGroupData = [{ "text": "熟悉的", "children": ["Java", "JavaScript", "C#", "PHP"] },{ "text": "不熟悉的", "children": ["C++", "Python", "GO"] }
];//初始化页面加载
$(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);
}
/*** 下拉列表分组显示*/
function initSelect2Group() {$('#sel_menu4').select2({placeholder: '请选择',multiple: true,data: initGroupData});$('#sel_menu4').select2().val(["Java"]).trigger('change');
}

3.运行结果：

参考博文：http://blog.csdn.net/u014388408/article/details/50587405

Select2学习总结相关推荐

在用到select2时，临时抱佛脚学习了一下
$('#e3').select2({ placeholder: "请输入", minimumInputLength: 1, separator: ",", // ...
Windows内核的表学习总结
SSDT - 系统服务描述符表 SSDT(System Services Descriptor Table),系统服务描述符表.这个表就是一个把ring3的Win32 API和ring0的内核函数联系 ...
matlab中存档算法代码,MATLAB 智能算法超级学习手册中程序代码
[实例简介] MATLAB 智能算法超级学习手册中程序代码 [实例截图] [核心代码] dc90ef43-7920-434e-bdb8-0636c31c0b44 └── MATLAB 智能算法超级学习 ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...
mybatis-plus学习记录（详细）
文章目录 mybatis-plus MyBatis Plus 快速上手常用注解查询自定义 SQL(多表关联查询) 添加删除修改 MyBatisPlus自动生成 Spring Boot +My ...
JQuery课堂学习笔记
版权声明:本文为博主原创文章,未经博主允许不得转载.更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/ ...
springboot 技术图谱_java后台（Springboot）开发知识图谱高频技术汇总-学习路线...
[原创]java后台(Springboot)开发知识图谱&&高频技术汇总 1.引言: 学习一个新的技术时,其实不在于跟着某个教程敲出了几行.几百行代码,这样你最多只能知其然而不知其所以 ...
bootstrap select2 php,JS组件Bootstrap Select2使用方法详解
在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的 ...
ruoyi(若依)框架学习
ruoyi(若依)官网:https://www.ruoyi.vip学习开发文档. RuoYi是一个后台管理系统,基于经典技术组合(Spring Boot.Apache Shiro.MyBatis.Th ...

Select2学习总结

Select2学习总结相关推荐

最新文章

热门文章