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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
javascript Object与Function使用
Jan 11 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
PHP 类与构造函数解析
2017/02/06 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP7 其他修改
2021/03/09 PHP
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
Django模板语言 Tags使用详解
2019/09/09 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python3中确保枚举值代码分析
2020/12/02 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
2016党校培训心得体会
2016/01/07 职场文书