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 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
浅谈javascript属性onresize
Apr 20 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 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守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
python使用socket远程连接错误处理方法
2015/04/29 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python实现桌面壁纸切换功能
2019/01/21 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
详解python UDP 编程
2020/08/24 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
Abbott Lyon官网:女士手表、珠宝及配件
2020/12/26 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
学校就业推荐信范文
2014/05/19 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
继承权公证书范本
2015/01/23 职场文书
外出考察学习心得体会
2016/01/18 职场文书
2019同学聚会主持词
2019/05/06 职场文书
工作报告范文
2019/06/20 职场文书
导游词之无锡梅园
2019/11/28 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js