本文总结了组件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个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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

标签:
JS,Bootstrap,Select

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“JS组件Bootstrap Select2使用方法解析”
暂无“JS组件Bootstrap Select2使用方法解析”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。