Select2.js下拉框使用小结


Posted in Javascript onOctober 24, 2016

用了这么久的Select2插件,也该写篇文章总结总结。当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件。

在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本。

官网:http://select2.github.io/

演示:

Select2.js下拉框使用小结

由于博客系统的原因,所以只能演示简单的功能。

一.文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上

最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用。比如:清除功能allowClear: true

最新版本请使用<select></select>标签(对于本地化的数据你可以使用input,但ajax远程数据必须使用select)

二.placeholder

placeholder占位提示文字,如果需要清楚功能,则必须设置placeholder。

三.加载本地数据

select2默认的数据属性是id、text,新版本可以自定义,但还是用默认的比较好。所以提供的json中最好转换为id、text形式,当然可以添加其他属性。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#c01-select").select2({
 data: data,
 placeholder:'请选择',
 allowClear:true
})

四.加载远程数据

$("#c01-select").select2({
 ajax: {
 url: "data.json",
 dataType: 'json',
 delay: 250,
 data: function (params) {
 return {
 q: params.term,
 };
 },
 processResults: function (data) {
 return {
 results: data
 };
 },
 cache: true
 },
 escapeMarkup: function (markup) { return markup; }, 
 minimumInputLength: 1,
 templateResult: formatRepo, 
 templateSelection: formatRepoSelection 
});

说明:

     1.q: params.term 查询参数(params.term表示输入框中内容,q发生到服务器的参数名;所以这里你可以添加自定义参数,如:stype:'person')

     2.processResults中results: data返回数据(返回最终数据给results,如果我的数据在data.res下,则返回data.res。这个与服务器返回json有关)

     3.minimumInputLength 最小需要输入多少个字符才进行查询,与之相关的maximumSelectionLength表示最大输入限制。

     4.escapeMarkup字符转义处理

     5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里,当然你可以return repo.text+"1";等

     6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}

     7.关于返回的 json的格式:select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}],新版严格要求这样的格式,当然你可以添加列,如:[{id:1,text:'text',name:'liu'}]

五.获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data"); //多选
if(res==undefined)
{
 alert("你没有选中任何项");
}
if(reslist.length)
{
 alert("你选中任何项");
}

六.清空选择项和设置不可用

//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input标签(默认就是本地数据),你可以用$("#c01-select").val('');来清空选项
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

七.启用多选

$("#c01-select").select2({
 data:data,
 multiple: true
});

多选演示:

Select2.js下拉框使用小结

八.下面简单说明新版与老版对比

1.结果回调和选中回调名称:formatResult、formatSelection(老版);templateResult、templateSelection(新版)

2.初始化:

//老版,注意如果初始化时文本框中本身没有值(为空),则不会触发该方法
initSelection: function (element, callback) {
 var id = $(element).val();
 var data = { id: id, text: id};//这里是初始化的数据,你可以通过id来从服务器上获取(ajax),再装载进去
 callback(data);
}

//新版,直接给select添加option
$("#id").append(new Option("Jquery", 10001, false, true));
//或者
$("#id").append("<option value='10001'>Jquery</option>");

3.获取或设置值:select2("val")(老版);$("select").val()(新版)

推荐使用

var res = $("#id").select2("data");
//返回数组,单选就取res[0];好处是不进可以获取id、text还可以获取其他属性,如res[0].names

4.停用或启用:$("select").enable(false);(老版);$("select").prop("disabled", true);(新版)

5.主题样式:新版的样式已经更新,但如果想使用老版样式则可以设置 theme: "classic"

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
js中小数转换整数的方法
Jan 26 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
Node 自动化部署的方法
Oct 17 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
微信小程序 绘图之饼图实现
Oct 24 #Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 #Javascript
微信小程序 富文本转文本实例详解
Oct 24 #Javascript
微信小程序 参数传递详解
Oct 24 #Javascript
10分钟掌握XML、JSON及其解析
Dec 06 #Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 #Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 #Javascript
You might like
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
PHP使用递归生成文章树
2015/04/21 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
对于Python中线程问题的简单讲解
2015/04/03 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python的range和linspace使用详解
2019/11/27 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
C#软件工程师英语面试题
2015/06/07 面试题
六月份红领巾广播稿
2014/02/03 职场文书
《将心比心》教学反思
2014/04/08 职场文书
大学活动总结范文
2014/04/29 职场文书
大学生毕业求职信
2014/06/12 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python