Select2下拉选项库 部分积累
用了这么久的Select2插件,也该写篇文章总结总结。
在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下方法参数,比最初版本要好看一些,本文针对新版本。
一.文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上
最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用。比如:清除功能allowClear: true
最新版本请使用标签
二.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
});
说明:
q: params.term 查询参数(params.term表示输入框中内容,q发生到服务器的参数名;所以这里你可以添加自定义参数,如:stype:’person’)
processResults中results: data返回数据(返回最终数据给results,如果我的数据在data.res下,则返回data.res。这个与服务器返回json有关)
minimumInputLength 最小需要输入多少个字符才进行查询,与之相关的maximumSelectionLength表示最大输入限制。
escapeMarkup字符转义处理
templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里,当然你可以return repo.text+”1”;等
templateSelection选中项回调function formatRepoSelection(repo){return repo.text}
关于返回的 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");//或者
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用
七.启用多选
$("#c01-select").select2({
data:data,
multiple: true
});
八.下面简单说明新版与老版对比
结果回调和选中回调名称:formatResult、formatSelection(老版);templateResult、templateSelection(新版)
初始化:
//老版,注意如果初始化时文本框中本身没有值(为空),则不会触发该方法
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”
Select2下拉选项库 部分积累的更多相关文章
- [js开源组件开发]模拟下拉选项框select
模拟下拉选项框select 在css3流行的情况下,下拉框还是无法满足PD的需求,所以有了autosearch,有了模拟下拉框.效果如下图: select DEMO请案例点击这里查看.http://w ...
- select2 下拉搜索 可编辑可搜索 / 只可搜索
官网 (http://select2.github.io/examples.html) <!--引入select2需要的文件--> <script type="text/j ...
- select2下拉插件
下拉单选: 1.行内 1)初始化数据: <select class="form-control select5"> <option selected>张三1 ...
- jsp代码中实现下拉选项框的回显代码
用到了c标签库:首先要在jsp中导入jstl的核心库标签 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/js ...
- Jquery ajax 绑定multiselect多选下拉选项,同时异步执行返回值
Jquery ajax 绑定multiselect多选下拉选项,同时异步执行获取返回值 function load(mslt_employees,belongto,mark) {//传入$(#ID) ...
- Android-PullToRefresh下拉刷新库基本用法
How:(使用) 转自:http://blog.csdn.net/hantangsongming/article/details/42490277 PullToRefresh是一套实现非常好的下拉刷新 ...
- Excel设置下拉选项的方法
前些日子参加提高班组织的数据采集工作,到各个二级学院搜集数据,当然离不开我们常用的Excel表格了.在这次采集数据的过程过程中还真学到了一两招.就比如在Excel中设置下拉选项的方法. 例如我们要在A ...
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...
- Excel下拉选项二级联动
在日常工作中,难免遇到操作excel的时候,二级联动下拉选项多用于像地市区县的应用场景 1)先把要联动的内容准备好,把它放到第二个sheet页中 2)操作级联的文本 全部选中之后,Ctrl+G -- ...
随机推荐
- C++中内部类访问外部类的私有成员
首先,如果不知道什么是内部类InnerClass的话,就没必要往下看了. 尝试在C++中模仿apple objective-c 的Grand Dispatch简化多线程编程时,使用了boost::fu ...
- SQL Sever删除外键
declare @sql varchar(max), @tab_name varchar(128), @fk_name varchar(128);declare c cursor forselect ...
- 19 Python 正则模块和正则表达式
什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代码(.p ...
- Gitblit的使用
什么是 Gitblit Gitblit是一个开源的用于管理,查看和提供Git仓库. 它主要设计为希望托管集中存储库的小工作组的工具. Gitblit有什么特点 ... Gitblit部署示例1 日常维 ...
- IDEA+testng,输出没有test-output目录
参考:http://www.cnblogs.com/veitch-623/p/6192601.html 在Edit Configurations里 使用默认报告就行
- HihoCoder1445 重复旋律5(后缀自动机)
重复旋律5 时间限制:10000ms 单点时限:2000ms 内存限制:512MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为一段数构成的数列. 现在小Hi想知道一部作品 ...
- C#异步编程(三)内核模式线程同步
其实,在开发过程中,无论是用户模式的同步构造还是内核模式,都应该尽量避免.因为线程同步都会造成阻塞,这就影响了我们的并发量,也影响整个应用的效率.不过有些情况,我们不得不进行线程同步. 内核模式 wi ...
- python实现进程的并发
__author__ = 'luozt' import telnetlib import multiprocessing import random def telnet(ip,hostname): ...
- Unity3D研究院之Assetbundle的实战(六十三)
http://www.xuanyusong.com/archives/2405 上一篇文章中我们相惜讨论了Assetbundle的原理,如果对原理还不太了解的朋友可以看这一篇文章:Unity3D研究院 ...
- 洛谷【P1714】切蛋糕
浅谈队列:https://www.cnblogs.com/AKMer/p/10314965.html 题目传送门:https://www.luogu.org/problemnew/show/P1714 ...