JS组件Bootstrap Select2使用方法详解


Posted in Javascript onApril 17, 2020

在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性。

一些通用的单选、多选、分组等功能这里就不多做介绍了,multiselect这方面是强项。重点介绍下select2的一些特性效果:

一、特性效果

1、多选效果

JS组件Bootstrap Select2使用方法详解

JS组件Bootstrap Select2使用方法详解

可以设置最多只能选几个

JS组件Bootstrap Select2使用方法详解

2、图文结合的效果

JS组件Bootstrap Select2使用方法详解

3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)

输入内容前

JS组件Bootstrap Select2使用方法详解

输入空格搜索出全部

JS组件Bootstrap Select2使用方法详解

滚动条滑动到底部自动加载剩余项

JS组件Bootstrap Select2使用方法详解

输入文本动态去后台过滤

JS组件Bootstrap Select2使用方法详解

更高级的用法如:

JS组件Bootstrap Select2使用方法详解

其实使用起来也不难,就是一个拼html的过程。

二、代码示例

1、多选效果

select2的多选很简单,设置一个属性就好了。

<script src="~/Scripts/jquery-1.10.2.js"></script>

 <script src="~/Content/bootstrap/js/bootstrap.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />

 <script src="~/Content/select2-master/dist/js/select2.js"></script>
 <link href="~/Content/select2-master/dist/css/select2.css" rel="stylesheet" />


<select id="sel_menu2" multiple="multiple" class="form-control">
 <optgroup label="系统设置">
 <option value="1">用户管理</option>
 <option value="2">角色管理</option>
 <option value="3">部门管理</option>
 <option value="4">菜单管理</option>
 </optgroup>
 <optgroup label="订单管理">
 <option value="5">订单查询</option>
 <option value="6">订单导入</option>
 <option value="7">订单删除</option>
 <option value="8">订单撤销</option>
 </optgroup>
 <optgroup label="基础数据">
 <option value="9">基础数据维护</option>
 </optgroup>
 </select>

 //多选
 $("#sel_menu2").select2({
 tags: true,
 maximumSelectionLength: 3 //最多能够选择的个数
 });

2、图文结合的效果

<select id="sel_menu" class="js-example-templating js-states form-control">
 <optgroup label="系统设置">
 <option value="1">用户管理</option>
 <option value="2">角色管理</option>
 <option value="3">部门管理</option>
 <option value="4">菜单管理</option>
 </optgroup>
 <optgroup label="订单管理">
 <option value="5">订单查询</option>
 <option value="6">订单导入</option>
 <option value="7">订单删除</option>
 <option value="8">订单撤销</option>
 </optgroup>
 <optgroup label="基础数据">
 <option value="9">基础数据维护</option>
 </optgroup>
 </select>



$(function () {
 //带图片
 $("#sel_menu").select2({
 templateResult: formatState,
 templateSelection: formatState
 });
});

function formatState(state) {
 if (!state.id) { return state.text; }
 var $state = $(
 '<span><img src="/content/images/' + state.element.value.toLowerCase() + '.ico" class="img-flag" /> ' + state.text + '</span>'
 );
 return $state;
};

3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)

<select id="sel_menu3" class="js-data-example-ajax form-control">
 <option value="3620194" selected="selected">请选择</option>
 </select>

$(function () {
 //远程筛选
 $("#sel_menu3").select2({
 ajax: {
 url: "/Home/GetProvinces",
 dataType: 'json',
 delay: 250,
 data: function (params) {
 return {
 q: params.term, // search term
 page: params.page
 };
 },
 processResults: function (data, params) {
 params.page = params.page || 1;

 return {
 results: data.items,
 pagination: {
 more: (params.page * 10) < data.total_count
 }
 };
 },
 cache: true
 },
 escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
 minimumInputLength: 1,
 templateResult: formatRepoProvince, // omitted for brevity, see the source of this page
 templateSelection: formatRepoProvince // omitted for brevity, see the source of this page
 });
});

function formatRepoProvince(repo) {
 if (repo.loading) return repo.text;
 var markup = "<div>"+repo.name+"</div>";
 return markup;
}

这里有要注意的一个地方就是processResults属性对应的方法有一个more属性用于是否分页显示的,这里的值要和你需要一次显示的值的条数匹配。

后台对应的方法如下:

public List<string> lstProvince = new List<string>() {"北京市","天津市","重庆市","上海市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省","内蒙古自治区","广西壮族自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区" };
 public JsonResult GetProvinces(string q, string page)
 {
 var lstRes = new List<Province>();
 for (var i = 0; i < 30; i++)
 {
 var oProvince = new Province();
 oProvince.id = i;
 oProvince.name = lstProvince[i];
 lstRes.Add(oProvince);
 }
 if (!string.IsNullOrEmpty(q.Trim()))
 {
 lstRes = lstRes.Where(x => x.name.Contains(q)).ToList();
 }
 var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take(10) : lstRes.Skip(Convert.ToInt32(page) * 10 - 10).Take(10);
 return Json(new { items = lstCurPageRes, total_count = lstRes.Count }, JsonRequestBehavior.AllowGet);
 }

上面说了这么多,那么我们在选中select2的选项之后如何取值和赋值呢?

1、获取选中的值

var oMenuIcon = $("#txt_menuicon_web").select2({
 placeholder: "请选择菜单图标",
 templateResult: oInit.formatState,
 templateSelection: oInit.formatState
 });
oMenuIcon.val();

2、设置select2的选中值

var oMenuIcon = $("#txt_menuicon_web").select2({
 placeholder: "请选择菜单图标",
 templateResult: oInit.formatState,
 templateSelection: oInit.formatState
 });
 oMenuIcon.val("CA").trigger("change");

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程 Bootstrap插件使用教程

以上就是关于select2的一些特性效果介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
js评分组件使用详解
Jun 06 Javascript
JSON 数据格式详解
Sep 13 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 #Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 #Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 #Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 #Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 #Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 #Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 #Javascript
You might like
我的论坛源代码(七)
2006/10/09 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
javascript jQuery插件练习
2008/12/24 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
理解 JavaScript EventEmitter
2018/03/29 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
详解python的四种内置数据结构
2019/03/19 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
Ajax和javascript的区别
2013/07/20 面试题
客户代表自我评价范例
2013/09/24 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
《赶海》教学反思
2014/04/20 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
团员年度个人总结
2015/02/26 职场文书
学雷锋活动简报
2015/07/20 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
怎么用Python识别手势数字
2021/06/07 Python