JS組件Bootstrap Select2使用方法解析
更新時間：2016年05月30日 11:24:40 作者：傷痕小丑魚
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Select2使用方法，感興趣的小伙伴們可以參考一下
本文總結(jié)了組件Bootstrap Select2在一些實際項目中的用法，分享給大家，有需要的朋友可以借鑒一下，少走些彎路，具體內(nèi)容如下
效果圖：
無論是固定方式獲取數(shù)據(jù)還是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>
固定方式獲?。?/strong>
$(".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]); //這個應(yīng)該是個json對象
}
console.log(arr);
return {
results: arr
};
}
}
});
說明
在ajax中的數(shù)據(jù)返回格式應(yīng)該是這個樣子滴（results）： [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
對應(yīng)的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);
如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：
以上就是關(guān)于select2的一些用法介紹，希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
相關(guān)文章
使用contextMenu插件實現(xiàn)Bootstrap table彈出右鍵菜單
如今Bootstrap這個前端框架已被許多人接受并應(yīng)用在不同的項目中，其中“開發(fā)高效，設(shè)備兼容”的特點表現(xiàn)得非常明顯。這篇文章主要介紹了使用contextMenu插件實現(xiàn)Bootstrap table彈出右鍵菜單,需要的朋友可以參考下2017-02-02
本篇文章主要介紹了使用D3.js創(chuàng)建物流地圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了微信小程序五星評分效果實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
跟我學(xué)習(xí)javascript的浮點數(shù)精度
跟我學(xué)習(xí)javascript的浮點數(shù)精度，帶大家真正的理解JavaScript的浮點數(shù)，提醒大家當(dāng)心浮點運算中的精度陷阱，需要的朋友可以參考下2015-11-11
Javascript中string轉(zhuǎn)date示例代碼
string轉(zhuǎn)date的方法有很多，在接下來為大家介紹下Javascript中是如何做到的，感性取的朋友不要錯過2013-11-11
這篇文章主要給大家介紹了關(guān)于js中base64與file之間的轉(zhuǎn)換方法,最近項目中需要實現(xiàn)把圖片的base64編碼轉(zhuǎn)成file文件的功能,然后再上傳至服務(wù)器,需要的朋友可以參考下2023-09-09
javascript的鼠標(biāo)事件是個比較龐大的家族。需要的朋友可以參考下。2009-12-12
JS腳本根據(jù)手機(jī)瀏覽器類型跳轉(zhuǎn)WAP手機(jī)網(wǎng)站（兩種方式）
隨著移動互聯(lián)網(wǎng)的不斷普及，企業(yè)的網(wǎng)絡(luò)宣傳不僅只局限在PC端，還要在移動端發(fā)展。我們在自己的網(wǎng)站做了WAP手機(jī)完整之后，如果有用戶通過手機(jī)訪問我們的企業(yè)頂級域名網(wǎng)站，就要判斷跳轉(zhuǎn)到專為的WAP網(wǎng)站，下面小編給大家整理有關(guān)手機(jī)瀏覽器跳轉(zhuǎn)WAP手機(jī)網(wǎng)站的相關(guān)內(nèi)容2015-08-08
緩沖效果就是實現(xiàn)一個頁面的由慢到快或由快到慢的過程。2009-09-09
這篇文章主要介紹了Bootstrap4 gulp 配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01