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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
xml转json的js代码
Aug 28 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
优化javascript的执行速度
2010/01/23 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
深入浅析vue组件间事件传递
2017/12/29 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
Python常用小技巧总结
2015/06/01 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
python logging日志模块原理及操作解析
2019/10/12 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
法学专业应届生求职信
2013/10/16 职场文书
机电一体化专业求职信
2014/07/22 职场文书
初三英语教学反思
2016/02/15 职场文书
初中政治教师教学反思
2016/02/23 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书