---
# System prepended metadata

title: Select2 - jQuery Plugin

---

# Select2 - jQuery Plugin
說明如何使用Select2套件來實現豐富的下拉選單功能，如單選.多選.可搜尋選項.動態新增選項等

官網說明

安裝套件
Step 0.確保先前已匯入jQuery函式庫

Step 1.匯入CSS和JS檔案，如下:

如果使用的是AdminLTE皮膚，可直接匯入內含的CSS和JS檔案，範例如下:

<script src="{{asset('bower_components/select2/dist/js/select2.full.min.js')}}"></script>


<link href="{{asset('bower_components/select2/dist/css/select2.min.css')}}" rel="stylesheet" type="text/css">

Step 2.針對select元素呼叫單一函式，指令如下:

$(document).ready(function(){
$(’.select2’).select2();
});

選項設定方法
可在參數內以物件形式帶入所需參數，如範例:

var select = $(’.select2’).select2({
placeholder: ‘請選擇’
});

相關選項說明
allowClear 是否出現清除內容的x按鈕，設定值為true/false，預設為false
closeOnSelect 是否當選取選項後，自動關閉下拉選單，設定值為true/false，預設為true
data 值為物件陣列，允許利用陣列來渲染選項
debug 是否顯示除錯訊息，顯示在console，預設為false
disabled 是否無法被控制，預設為false
multiple 是否支持多選，預設為false
placeholder 當未選取任何選項時的提示文字
tags 是否支持新增選項
單選輸入項設計
建議使用Form套件生成輸入項，範例如下，參數依序為:元素name.選項陣列.預設選項.其他屬性陣列

{!! Form::select('cgy_id',$cgys,null,['id'=>'cgy_id','class'=>'form-control']) !!}

由Controller回傳的選項key.value陣列，做法如下：

//使用pluck()，回傳所有資料的name和id欄位，以key.value陣列形式
$cgys = \App\Cgy::pluck('name','id');
return view('items.edit',compact('item','cgys'));
多選輸入項設計
同樣建議使用Form套件生成輸入項，與單選類似，不同在於name後面要加上[]，回傳值才會是陣列，另外要加上multiple屬性

{!! Form::select('cgy_id[]',$cgys,null,['id'=>'cgy_id','class'=>'form-control','multiple']) !!}

如果希望多一個清除所有選項的按鈕，可以加上在呼叫select2()時加上allowClear，如下示範：

$('#cgy_id').select2({
    allowClear: true,
});
implode與explode
為了要存入多選的內容，所以將Item的cgy_id欄位改成字串，將選項以逗號隔開的形式來儲存。因為常需要在字串和陣列間轉換就會用到 explode()和implode()，說明如下：

回傳陣列 = explode(分隔的字串,要處理的字串);
回傳字串 = implode(分隔的字串,要處理的陣列);

發表於  HackMD
 90
讚賞 收藏 訂閱