select2 下拉列表外掛程式

2021-09-09 08:41:09 字數 817 閱讀 7134

如何使用select2?

1.1 通過cdn引用

將以下兩行**新增到html頁面,即完成了select2的引入:

注意:還需引入jquery支援select2的使用

1.2 通過離線引用

1.2.1 引入js資源庫

因此引入路徑為:【/js/select2.min.js】

1.2.2 引入css樣式

select2常用api

2.1 原始碼

區域:請選擇區域

珠海深圳

澳門香港

2.2 初始化select2

select2()函式可新增相應配置:

$('#area').select2();

2.3 選中控制項id="area"、value="1"的元素

//初始化select2

var areaobj = $("#area").select2();

var optionval = 1;

areaobj .val(optionval).trigger("change");

areaobj .change();

2.4獲取、更改select的value值

獲取值:預設是獲取當前控制項選中元素對應的value值,參照3.1原始碼中,假設當前選中「珠海」,那麼獲取的value值就是1

$("#area").select2('val');

更改值:將val更改為756;預設是更改當前控制項選中元素對應的value值,參照3.1原始碼中,假設當前選中「珠海」,那麼更改後的value值就是756

$("#area").select2('val','756');

select2 下拉載入 分頁資料

這篇博文 注釋寫的比較詳細,不過他做了很多修改 這個也可以看看 首先,頁面上引入jquery,和select2 頁面上寫好select js 獲取url中的引數 function geturlparam name var userid geturlparam userid circleid sele...

解決select2下拉欄錯位問題

在有些情況下,比如頁面中多個選擇欄的情況下,使用select2外掛程式會導致錯位的問題 就像下面這樣 本應出現在藍框位置的,卻跑到了紅框的位置。因為是相對位置問題,所以可以鎖定在css。經過對css的排查,發現select2會為下拉框新增乙個行內樣式position absolute 下拉框設定ab...

select2 超好用的下拉列表

rails 自帶的下拉列表不好用,效果一般,流行的 select2 就好用多了。從 rails5.1 版本開始,gemfile 預設不再安裝gem jquery rails 無法正常使用 select2,解決方法如下 在gemfile加入gem jquery rails 終端bundle insta...