是一個 jQuery 套件,官方介紹是「提供了一個可自訂的選擇框,支援搜尋、標記、遠端資料集、無限滾動和許多其他常用選項」,但我自己最常用的是自動完成。
第二個是 select2 的 bootstrap 主題。
第 3 行預設使用 bootstrap 主題。
一、安裝
1. 下載
我是透過 npm 下載以下兩個套件:npm i select2 npm i select2-theme-bootstrap5第一個是 select2 主要程式。
第二個是 select2 的 bootstrap 主題。
2. 載入 Javascript
require("select2"); require("../../node_modules/select2/dist/js/i18n/zh-TW.js"); $.fn.select2.defaults.set("theme", "bootstrap");第 2 行載入中文語系。
第 3 行預設使用 bootstrap 主題。
3. 載入 CSS
@import "select2"; @import "select2-theme-bootstrap5";第 2 行載入 bootstrap 主題。
二、使用
1. HTML
<select class="form-control select2"> <option value="1">AAA</option> <option value="2">BBB</option> <option value="3">CCC</option> </select>
2. 初始化
$(document).ready(function() { $('.select2').select2(); });
參考文件
留言
張貼留言