一般情況下,select下拉框是隻讀的,即是隻能選擇不能修改或搜尋。那如何讓select具有搜尋功能呢?下面介紹一種jquery外掛——select2,通過下面例項簡單介紹使用方法
工具/原料
HBuilder
截圖工具
畫圖工具
瀏覽器
方法/步驟
第一步,開啟HBuilder開發工具,將select2相關的css和js檔案拷貝到新建的web專案的相應目錄裡(css和js資料夾),建立靜態頁面index.html,如下圖所示:
第二步,在index.html頁面中引入select2相關的css和js檔案,並將jquery核心js引入,如下圖所示:
第三步,在body標籤內部插入一個div標籤,然後在div標籤內插入一個select標籤並新增多個option,如下圖所示:
第四步,在script標籤內初始化呼叫select2()方法,直接利用select下拉框的id進行初始化,如下圖所示:
第五步,直接選擇瀏覽器進行預覽,可以選擇下拉框中的選項,如下圖所示:
第六步,修改下拉框樣式,輸入選項中每個字元,可以搜尋出包含這個字元的所有選項,如下圖所示:
注意事項
瞭解select單選和多選的特性
熟練使用select2,注意引入相關的css和js檔案