bootstrap select2 参数详解
<!--[多选]则需要加上属性:multiple="multiple" -->
<select class="form-control" id="select2-id" multiple="multiple">
<option value="1" data-plantform="android">APP1</option>
<option value="1" data-plantform="ios">APP2</option> </select>
| 载入select2
var formatState = function (state) {
//console.log(state);
if (!state.id) {
return state.text; }
var $state = $('<span><img src="/public/images/'+state.element.dataset.plantform+'.jpg" style="width:25px;" /> '
+ state.text + '</span>'); return $state;
} $("#select2-id").select2({
templateResult : formatState, // 列表带图片
templateSelection : formatState, // 选中的带图片 language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择", // 空值提示内容,选项值为 null
//placeholder: {id: '', text: "请选择"}, // 同上,这里默认空值为 ''
minimumInputLength: 10 //最小需要输入多少个字符才进行查询
allowClear: true, //是否允许清空选中
tags: false, //设置必须存在的选项 才能选中,设置不存在的值则为null,如果 placeholder: {id: '', text: "请选择"} 则为 ''
selectOnClose: true, // 如果没有手动选中,下拉框消失后会自动选中被hover的选项 (不建议使用)
closeOnSelect: false, // 选择后下拉框不会关闭(单选-不建议使用)
minimumResultsForSearch: Infinity, // 隐藏搜索框
theme: "classic", // 样式 maximumSelectionLength: 3, // 多选 - 设置最多可以选择多少项
tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项 前提是:tags: true
});
| 移除select2
$("#select2-id").select2("destroy");
| 清空下拉框列表值
$("#select2-id").empty();
| 设置下拉列表
// 单选 - 必须有一项为空值,否则默认选择第一项(如果必须选择一项可以不设置空值)
$("#select2-id").append($("<option>", {value: '', text: '全部'}));
$("#select2-id").append($("<option>", {value: 'value1', text: 'text1'}));
$("#select2-id").append($("<option>", {value: 'value2', text: 'text2'})); // 多选 - 不能有一项为空值,否则再清空时会出BUG
$("#select2-id").append($("<option>", {value: 'value1', text: 'text1'}));
$("#select2-id").append($("<option>", {value: 'value2', text: 'text2'}));
| 赋值说明:赋值会触发change事件
// 赋值 - 单选
$("#select2-id").val('value').trigger("change");
// 赋值 - 多选
$("#select2-id").val(['value1','value2']).trigger("change");
| 获取选中值
// 多选返回数组,单选返回字符串
$("#select2-id").val();
bootstrap select2 参数详解的更多相关文章
- JVM的参数详解(转)
12年毕业到先在处理第一年外这几年纯属于打酱油,当初自学Java然后就出来找工作了,还有第一家面试就通过了挺幸运的 但之后的这段时间一直是处于吃老本的状态.最近心情真的很不好,各种黄老邪!一直处于堕落 ...
- 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程
反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) 背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...
- Kafka单线程Consumer及参数详解
请使用0.9以后的版本: 示例代码 Properties props = new Properties(); props.put("bootstrap.servers", &quo ...
- kubelet 参数详解
kubelet 参数详解 基本参数 --allow-privileged=true #允许容器请求特权模式 --anonymous-auth=false #不允许匿名请求到 kubelet 服务(默认 ...
- Nginx主配置参数详解,Nginx配置网站
1.Niginx主配置文件参数详解 a.上面博客说了在Linux中安装nginx.博文地址为:http://www.cnblogs.com/hanyinglong/p/5102141.html b.当 ...
- iptables参数详解
iptables参数详解 搬运工:尹正杰 注:此片文章来源于linux社区. Iptalbes 是用来设置.维护和检查Linux内核的IP包过滤规则的. 可以定义不同的表,每个表都包含几个内部的链,也 ...
- chattr的常用参数详解
chattr的常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,有的运维工程师不得不和开发和测试打交道,在我们公司最常见的就是部署接口.每天每个人部署的 ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- mha配置参数详解
mha配置参数详解: 参数名字 是否必须 参数作用域 默认值 示例 hostname Yes Local Only - hostname=mysql_server1, hostname=192.168 ...
随机推荐
- js获取前之前或之后的日期
function fun_date(aa){ var date1 = new Date(), time1=date1.getFullYear()+"-"+(date1.getMon ...
- linux设置好IP后,可以访问内网,不能访问外网
1,设置网卡,ip vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 #描述网卡对应的设备别名,例如ifcfg-eth0的文件中它为et ...
- python with用法
python中with可以明显改进代码友好度,比如: with open('a.txt') as f: print f.readlines() 为了我们自己的类也可以使用with, 只要给这个类增加两 ...
- 关于java中的批注
J2SE 提供的最后一个批注是 @SuppressWarnings.该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. 一点背景:J2SE 5.0 为 Java 语言增加 ...
- centos5.5 Apache2 Web 服务器的安装
# vi /etc/httpd/conf/httpd.conf 把以下虚拟机的配置加在 httpd.conf 文件末尾即可 NameVirtualHost *:80 // ...
- 屏蔽ps联网激活
屏蔽ps联网激活C:\Windows\system32\drivers\etc\host127.0.0.1 lm.licenses.adobe.com127.0.0.1 na1r.services.a ...
- centos 单独安装nginx
安装包下载网址: http://nginx.org/en/download.html 进入Linux文件夹执行 wget http://nginx.org/download/nginx-1.8.0.t ...
- css3实战版的点击列表项产生水波纹动画
1.html+js: <!DOCTYPE html><html><head lang="en"> <meta charset=&qu ...
- JDBC连接SQL Server 2005步骤详解
一.设置SQL Server服务器: 1.“开始” → “程序” → “Microsoft SQL Server 2005” → “配置工具” → “SQL Server Configurati ...
- hive CliDriver 源码分析
664行 CliDriver main启动 public static void main(String[] args) throws Exception { int ret = new CliDri ...