bootstrap select2 使用简单介绍
1. 基本属性配置:
$("#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
});
2. 常用基本操作:
2. 操作:
(1) 移除/销毁
$("#select2-id").select2("destroy");
(2)清空下拉框列表值
$("#select2-id").empty();
(3)设置下拉列表
// 单选 - 必须有一项为空值,否则默认选择第一项(如果必须选择一项可以不设置空值)
$("#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'}));
(4)赋值
// 赋值 - 单选
$("#select2-id").val('value').trigger("change");
// 赋值 - 多选
$("#select2-id").val(['value1','value2']).trigger("change");
(5)获取中值
// 多选返回数组,单选返回字符串
$("#select2-id").val();
更多操作可参考:http://www.cnblogs.com/landeanfen/p/5099332.html
http://www.cnblogs.com/cloudshadow/p/bootstrap_select2.html
bootstrap select2 使用简单介绍的更多相关文章
- BootStrap 按钮组简单介绍
学会按钮组需要掌握以下几个类. btn btn-group btn-toolbar btn-group-vertical 和 下拉菜单的基本类 dropdown-toggle dropdow ...
- Appium Android Bootstrap源代码分析之简单介绍
在上一个系列中我们分析了UiAutomator的核心源代码,对UiAutomator是怎么执行的原理有了根本的了解.今天我们会開始另外一个在安卓平台上基于UiAutomator的新起之秀--Appiu ...
- 转载 JS组件Bootstrap Select2使用方法详解
JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...
- 对bootstrap modal的简单扩展封装
对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...
- SQLite数据库和JPA简单介绍
SQLite数据库和JPA简单介绍 一.SQLite简单使用 SQLite是遵循ACID的关系数据库管理系统,它的处理速度很快,它的设计目标是嵌入式的,只需要几百K的内存就可以了. 1.下载SQLit ...
- 简单介绍什么是协程及其在ES6中的实现方式
协程,英文名coroutine,是一种执行过程可以被暂停和恢复的方法.各个协程之间相互协作完成一个任务. 让我们来看一个关于发挥协程作用的例子.假定我们有一个生产者和消费者的关系,生产者创建物品并将物 ...
- [原创]关于mybatis中一级缓存和二级缓存的简单介绍
关于mybatis中一级缓存和二级缓存的简单介绍 mybatis的一级缓存: MyBatis会在表示会话的SqlSession对象中建立一个简单的缓存,将每次查询到的结果结果缓存起来,当下次查询的时候 ...
- 利用Python进行数据分析(7) pandas基础: Series和DataFrame的简单介绍
一.pandas 是什么 pandas 是基于 NumPy 的一个 Python 数据分析包,主要目的是为了数据分析.它提供了大量高级的数据结构和对数据处理的方法. pandas 有两个主要的数据结构 ...
- 利用Python进行数据分析(4) NumPy基础: ndarray简单介绍
一.NumPy 是什么 NumPy 是 Python 科学计算的基础包,它专为进行严格的数字处理而产生.在之前的随笔里已有更加详细的介绍,这里不再赘述. 利用 Python 进行数据分析(一)简单介绍 ...
随机推荐
- flask_session_源码剖析
开始文件(部分): from flask import Flask,request,session app = Flask(__name__) app.secret_key = 'sdfsdfsd' ...
- SpringBoot入坑-持久化操作
前面内容中我们已经了解到了SpringBoot关于参数传递的相关知识,本篇我们一起来学习一下SpringBoot关于数据库持久化操作的知识,这里我们使用JPA进行数据库的持久化操作. 首先由于我们需要 ...
- Timus Online Judge:ural:1006. Square Frames
原题链接:http://acm.timus.ru/problem.aspx?space=1&num=1006 看到题第一反应:这玩意怎么读入…… 本地的话因为是全角字符,会占两个位置,所以需要 ...
- [51nod1329]路径游戏
Snuke与Sothe两个人在玩一个游戏.游戏在一个2*N的网格中进行(2行N列),这个网格中的2N个格子不是黑色就是白色.定义,一条有效路径是指一个完全由白色格子构成的序列,这个序列的第一个网格元素 ...
- [bzoj1692] [Usaco2007 Dec]队列变换 (hash||暴力)
本题同bzoj1640...双倍经验双倍幸福 虽然数据范围n=3w然而O(n²)毫无压力= = http://blog.csdn.net/xueyifan1993/article/details/77 ...
- Zabbix如何实现批量监控端口状态
引言 ------------------------------------------------------------------------------------------------- ...
- Linux磁盘使用过载
系统出现磁盘占用达到100%导致系统崩溃 查看那些个磁盘使用达到100% 命令 df -h 我们发现是www目录使用达到100%,开始清理,首先查找大于100M的大文件 find / -size + ...
- mac android studio 出现 Error: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
Error: SDK location not found. Define location with sdk.dir in the local.properties file or with a ...
- spring定时任务执行两次 项目重复初始化 项目启动两次
tomcat/config/server.xml中Host标签Context节点的问题 项目里quartz定时器总是被执行2次,通过打印发现原来项目被加载了两次,所以项目下的Listener被重复加载 ...
- HTTP的请求方法OPTIONS
HTTP请求方法并不是只有GET和POST,只是最常用的.据RFC2616标准(现行的HTTP/1.1)得知,通常有以下8种方法:OPTIONS.GET.HEAD.POST.PUT.DELETE.TR ...