在開發 Web 應用程式時，表單選擇器是不可或缺的 UI 元件之一。然而，原生的 HTML <select> 標籤功能有限，無法提供更直覺且使用者友善的操作體驗。這時候，Select2 便成為開發者的絕佳選擇，它是一款基於 jQuery 的下拉選單增強插件，提供強大的搜尋、標籤、動態載入等功能，讓選單操作更加靈活。
Select2 的主要特色
強化搜尋功能
原生 <select> 只提供簡單的下拉選單，而 Select2 內建即時搜尋功能，使用者可以直接輸入關鍵字來快速篩選選項，特別適合選項數量較多的情境，如國家選擇、產品分類等。
支援 AJAX 動態載入
當選項數量龐大時，預載所有數據會影響效能。Select2 允許透過 AJAX 方式動態載入資料，只有在使用者輸入關鍵字時才發送請求，有效減少伺服器負擔。
支援多選與標籤化
除了單選模式，Select2 還支援 多選模式，讓使用者能選取多個選項。此外，它還能轉換輸入內容為「標籤」，這對於輸入 Email、標籤管理或其他需要自訂選項的應用場景非常有用。
自訂樣式與回呼函式
開發者可以透過 CSS 自訂 Select2 的外觀，使其符合網站設計需求。此外，它提供豐富的回呼函式，允許開發者在選擇變更時執行特定邏輯，如驗證、動態更新其他欄位等。
多語系支援
Select2 內建多種語系支援，包括中文，開發者可以輕鬆設定語言，提供更友善的使用者體驗。
可搭配 Bootstrap 等 UI 框架
由於 Select2 具有高度的可自訂性，開發者可以輕鬆與 Bootstrap、Material UI 等 UI 框架結合，讓整體設計更加一致。
如何開始使用 Select2？
要使用 Select2，開發者只需引入對應的 JavaScript 和 CSS，然後使用 jQuery 來啟用：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<select id="example" style="width: 100%;">
<option value="1">選項 1</option>
<option value="2">選項 2</option>
<option value="3">選項 3</option>
</select>
<script>
$(document).ready(function() {
$('#example').select2();
});
</script>
如果想要讓 select2 符合你使用的 UI 框架的 UI 的話，也可以到 GitHub 頁面上尋找對應的 CSS，目前有 Bootstrap 3,4,5 及 Flat UI 可以選擇。
![[Vue.js] 事件控制](/assets/upload/1583563899683_0.jpg)
