JS组件Bootstrap Select2使用方法解析


Posted in Javascript onMay 30, 2016

本文总结了组件Bootstrap Select2在一些实际项目中的用法,分享给大家,有需要的朋友可以借鉴一下,少走些弯路,具体内容如下

效果图:

JS组件Bootstrap Select2使用方法解析

无论是固定方式获取数据还是ajax获取都需要引入bootstrap.js/css 和 select2.js/css及:

{{ stylesheet_link('css/bootstrap.css') }}
{{ stylesheet_link('css/select2.min.css') }} 
{{ stylesheet_link('css/font-awesome.min.css') }} 
{{ stylesheet_link('css/prettify.css') }} 


{{ javascript_include('js/lib/jquery.js') }}
{{ javascript_include('js/lib/select2.full.js') }}
{{ javascript_include('js/lib/bootstrap.js') }}
<div class="container"> 
 <section id="tags" class="row">
 <div class="col-md-4">
  <p>
   <select class="js-example-tags form-control" multiple="multiple">
    <option selected="selected">orange</option>
    <option>white</option>
    <option selected="selected">purple</option>
   </select>
  </p>
 </div>
</section>
</div>
</div>

固定方式获取:

$(".js-example-tags").select2({
 tags: true, //是否可以自定义tag
 createSearchChoice:function(term, data) { 
 alert(1);
 if ($(data).filter(function() { 
  return this.text.localeCompare(term)===0; 
 }).length===0) 
 {return {id:term, text:term};} 
 },
 multiple: true,
 data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});

ajax方式获取:

$(".js-example-tags").select2({
 // enable tagging
 tags: true,

 // loading remote data
 // see https://select2.github.io/options.html#ajax
 ajax: {
 url: "Ask2/tags",
 processResults: function (data, page) {
  console.log(data);
  var parsed = data;
  var arr = [];
  for(var x in parsed){
   arr.push(parsed[x]); //这个应该是个json对象
  }
  console.log(arr);
  return {
  results: arr
  };
 }
 }
});

说明

在ajax中的数据返回格式应该是这个样子滴(results): [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
对应的php代码例子

...
  $p1 = array(id => "1",text=>"java");
  $p2 = array(id => "2",text=>"jvm");
  $test = array(1=>$p1,2=>$p2);  
  $params['responseData'] = $test;
  $this->view->disable();
  return parent::ajaxResponse($params);

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
Safari5中alert的无限循环BUG
Apr 07 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
node运行js获得输出的三种方式示例详解
Jul 02 Javascript
AngularJs表单验证实例详解
May 30 #Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 #Javascript
jquery获取form表单input元素值的简单实例
May 30 #Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 #Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 #Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 #Javascript
jquery获取复选框checkbox的值实现方法
May 30 #Javascript
You might like
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python django事务transaction源码分析详解
2017/03/17 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python向excel中写入数据的方法
2019/05/05 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
Python join()函数原理及使用方法
2020/11/14 Python
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
中专生自我鉴定
2013/12/17 职场文书
教师求职信
2014/06/17 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
法人委托书的范本格式
2014/09/11 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
爱心捐助活动总结
2015/05/09 职场文书
中秋节主题班会
2015/08/14 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android