jQuery – 好用的外掛 select2。介紹AJAX方法。

安裝

可以使用 NPM 安裝,用 Webpack 執行。以下介紹簡單傳統用法。

加入 jQuery 與 select2

 

npm

 

基本用法

<option> 外層不一定要使用 <optgroup> 做分類

 

動態定義 option

data 的部分可以透過 AJAX 取得以後,再渲染 <option>。

上面示範有使用 <optgroup> 的作法,如果不需要分類就直接

要給 <option> 的格式,務必要包含 id, text 兩個參數。

AJAX

當搜尋的時候,才開始向伺服器要資料,並呈現再 <option>

processResults 從伺服器取得的結果,因為 return.results 要產生 <option> ,所以記得格式務必為

 

複選

<select> 改為複選之外,select2 也要添加 tags: true。

 

AJAX 預選

從遠端取得資料後,只需要對綁定的元素使用 jQuery 的 apeend() 與 trigger() 觸發就可以了。

 

Select2 相關設定可以參考官方

發表迴響