1、我專案中使用的是select2 4.0.3[特別需要強調的是selec2 4.0以後的版本和3.x的版本使用差距很大,具體可參見原始碼]
2、使用select2 外掛程式需要引入其js和css,還有4.0以後特定轉化語言的js檔案
//樣式
//js
3、前端頁面,乙個空的
標籤,裡面的name、id屬性自定義
動態請求資料
請求說明: 0
)、$("#blocksselect").select2()此處的id和select對應 1
)、language:"zh-cn", 需要引入zh-cn的js,漢化select2外掛程式,預設是英文的; 2
)、placeholder:,
allowclear: true,
配套使用,select2外掛程式輸入框預設顯示的值; 3
重寫原始碼中的方法,適應自己專案中的提示語; 4
)、minimuminputlength:1, 查詢時 至少輸入的字元個數 5
)、id :function(data), id
轉化函式,select2查詢出來的結果,如要選擇的話,需要轉化成id; 6
)、 ajax
請求,後端返回的json隨便定義,但是一定要返回乙個主鍵值,在轉換成id,這樣在select4.0之中才能選中,具體在processresults函式中完成,其中processresults函式中需要根據後端返回的引數來判斷動態載入的當前頁和總條數。
具體:pagination: , //
字元轉義處理
templateselection:formatreposelection, //
獲取輸入框選擇的值
templateresult:formatrepo //
查詢返回值渲染
5、頁面渲染函式
6、選中之後,在select2輸入框顯示函式
、返回的json轉換成id之後,可以直接刪除,如果通過某個清空的button來清空select2選中的值得話,可以通過:
$("#blocksselect").val("
請輸入房屋位址").trigger("change");這樣來設定
需要注意的是:select4.0以後,
1.如果返回的json裡面沒有id。則會出現查詢的物件無法選擇的問題。處理方式,就是在返回的josn物件裡面加入id這個唯一標示
2.formatreposelection
函式中,預設的是處理repo物件的id 和text 這2個屬性,而我這裡定義的json是是pkid和name,所以需要把pkid和name複製到id和text裡面。否則沒法顯示在介面上。另外一種簡單的處理方法,可以把json物件直接變成id和text的結構。這樣就不用定製select2裡面的方法了。
select2 4 0 3 空記錄時的處理
使用select2外掛程式,如果後台查詢沒有記錄,不能返回null,要返回乙個空陣列,不然會報錯 data is null 完整使用記錄如下 前台html標記 商 前台js supplier select2 datatype json delay 200,data function params p...
select2 4 0 3 空記錄時的處理
使用select2外掛程式,如果後台查詢沒有記錄,不能返回null,要返回乙個空陣列,不然會報錯 data is null 完整使用記錄如下 前台html標記 商 前台js supplier select2 datatype json delay 200,data function params p...
select2 4 0 3 空記錄時的處理
使用select2外掛程式,如果後台查詢沒有記錄,不能返回null,要返回乙個空陣列,不然會報錯 data is null 完整使用記錄如下 前台html標記 商 前台js supplier select2 datatype json delay 200,data function params p...