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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
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
一个简易需要注册的留言版程序
2006/10/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
投标承诺书范本
2014/03/27 职场文书
房屋买卖协议样本
2014/11/16 职场文书
服务员岗位职责
2015/02/03 职场文书
应届毕业生自荐信
2015/03/04 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
js前端图片加载异常兜底方案
2022/06/21 Javascript