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 相关文章推荐
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
node.js基础知识小结
Feb 26 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
2006/10/09 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php简单压缩css样式示例
2016/09/22 PHP
javascript中xml操作实现代码
2011/11/21 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
中专三年学习的个人自我评价
2013/12/12 职场文书
调解员先进事迹材料
2014/02/07 职场文书
工商管理专业自荐信
2014/06/03 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫