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 相关文章推荐
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
js实现头像上传并且可预览提交
Dec 25 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
基于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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
PHP发送短信代码分享
2015/08/11 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
python使用json序列化datetime类型实例解析
2018/02/11 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Python 实现向word(docx)中输出
2020/02/13 Python
Pandas的数据过滤实现
2021/01/15 Python
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
经典促销广告词大全
2014/03/19 职场文书
出生公证委托书
2014/04/03 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
企业口号大全
2014/06/12 职场文书
中学团支部工作总结
2015/08/13 职场文书
护士工作心得体会
2016/01/25 职场文书