<!--[多选]则需要加上属性: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();

Select2使用示例地址: https://select2.github.io/examples.html
Select2参数文档说明: https://select2.github.io/options.html
 

bootstrap select2 参数详解的更多相关文章

  1. JVM的参数详解(转)

    12年毕业到先在处理第一年外这几年纯属于打酱油,当初自学Java然后就出来找工作了,还有第一家面试就通过了挺幸运的 但之后的这段时间一直是处于吃老本的状态.最近心情真的很不好,各种黄老邪!一直处于堕落 ...

  2. 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程

    反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑)   背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...

  3. Kafka单线程Consumer及参数详解

    请使用0.9以后的版本: 示例代码 Properties props = new Properties(); props.put("bootstrap.servers", &quo ...

  4. kubelet 参数详解

    kubelet 参数详解 基本参数 --allow-privileged=true #允许容器请求特权模式 --anonymous-auth=false #不允许匿名请求到 kubelet 服务(默认 ...

  5. Nginx主配置参数详解,Nginx配置网站

    1.Niginx主配置文件参数详解 a.上面博客说了在Linux中安装nginx.博文地址为:http://www.cnblogs.com/hanyinglong/p/5102141.html b.当 ...

  6. iptables参数详解

    iptables参数详解 搬运工:尹正杰 注:此片文章来源于linux社区. Iptalbes 是用来设置.维护和检查Linux内核的IP包过滤规则的. 可以定义不同的表,每个表都包含几个内部的链,也 ...

  7. chattr的常用参数详解

    chattr的常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,有的运维工程师不得不和开发和测试打交道,在我们公司最常见的就是部署接口.每天每个人部署的 ...

  8. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  9. mha配置参数详解

    mha配置参数详解: 参数名字 是否必须 参数作用域 默认值 示例 hostname Yes Local Only - hostname=mysql_server1, hostname=192.168 ...

随机推荐

  1. js获取前之前或之后的日期

    function fun_date(aa){ var date1 = new Date(), time1=date1.getFullYear()+"-"+(date1.getMon ...

  2. linux设置好IP后,可以访问内网,不能访问外网

    1,设置网卡,ip vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 #描述网卡对应的设备别名,例如ifcfg-eth0的文件中它为et ...

  3. python with用法

    python中with可以明显改进代码友好度,比如: with open('a.txt') as f: print f.readlines() 为了我们自己的类也可以使用with, 只要给这个类增加两 ...

  4. 关于java中的批注

    J2SE 提供的最后一个批注是 @SuppressWarnings.该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. 一点背景:J2SE 5.0 为 Java 语言增加 ...

  5. centos5.5 Apache2 Web 服务器的安装

    # vi /etc/httpd/conf/httpd.conf 把以下虚拟机的配置加在 httpd.conf  文件末尾即可 NameVirtualHost *:80               // ...

  6. 屏蔽ps联网激活

    屏蔽ps联网激活C:\Windows\system32\drivers\etc\host127.0.0.1 lm.licenses.adobe.com127.0.0.1 na1r.services.a ...

  7. centos 单独安装nginx

    安装包下载网址: http://nginx.org/en/download.html 进入Linux文件夹执行 wget http://nginx.org/download/nginx-1.8.0.t ...

  8. css3实战版的点击列表项产生水波纹动画

    1.html+js: <!DOCTYPE html><html><head lang="en">    <meta charset=&qu ...

  9. JDBC连接SQL Server 2005步骤详解

    一.设置SQL Server服务器:    1.“开始” → “程序” → “Microsoft SQL Server 2005” → “配置工具” → “SQL Server Configurati ...

  10. hive CliDriver 源码分析

    664行 CliDriver main启动 public static void main(String[] args) throws Exception { int ret = new CliDri ...