---
tags: javascript
---
# Select2 - jQuery Plugin

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

[官網說明](https://select2.org/)

## 安裝套件

Step 0.確保先前已匯入jQuery函式庫

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

如果使用的是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(分隔的字串,要處理的陣列);