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 相关文章推荐
Opacity.js
Jan 22 Javascript
使用js 设置url参数
Jul 08 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
js实现省级联动(数据结构优化)
Jul 17 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实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
jQuery 使用个人心得
2009/02/26 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
python实现八大排序算法(2)
2017/09/14 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
linux环境下Django的安装配置详解
2019/07/22 Python
如何在sublime编辑器中安装python
2020/05/20 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
JAVA中的关键字有什么特点
2014/03/07 面试题
大学生物业管理求职信
2013/10/24 职场文书
劳动之星获奖感言
2014/02/01 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
公司员工管理制度
2015/08/04 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python