bootstrap select2 使用简单介绍
2017-09-25 19:52
302 查看
1. 基本属性配置:
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
$("#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
相关文章推荐
- BootstrapTable refresh 方法使用实例简单介绍
- epoll使用方法&简单原理介绍&详细的select/poll/epoll对比
- select2 bootstrap 简单使用
- Bootstrap轮播插件简单使用方法介绍
- select2 bootstrap 简单使用
- Android使用bootstrap简单介绍
- bootstrap-select简单使用
- 简单介绍vss工具command操作使用
- 软件包管理 之 file.src.rpm 使用方法的简单介绍
- 简单介绍使用WCF的Web编程模型开发REST风格的Web Service
- Eclipse中使用MSN插件的简单介绍
- 简单介绍VC++6.0下如何使用压缩库ZLIB
- 简单介绍 VC2003 使用 ATL 开发 ActiveX 控件
- Lucene的使用以及简单介绍
- PDF iText 使用简单介绍
- javascript 绑定、构造 select 下拉菜单/最简单AJAX使用
- Asp.net 2.0中Themes的使用简单介绍
- AJAX学习基础:简单介绍数据岛使用方法
- CProgressCtrl 进度条控件的使用方法简单介绍
- Linux curl使用简单介绍