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 相关文章推荐
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
js中数组常用方法总结(推荐)
Apr 09 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.MVC的模板标签系统(四)
2006/09/05 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
python实现批量修改文件名
2020/03/23 Python
Django视图、传参和forms验证操作
2020/07/15 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
幼儿园美术教学反思
2014/01/31 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
运动会宣传稿50字
2015/07/23 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers