說起下拉框大家一定不陌生，就是放著指定內(nèi)容的容器需要什么就直接選擇就可以了，很方便。但是凡事都有利弊兩面，在數(shù)據(jù)少的時候是挺方便的但是數(shù)據(jù)一多起來就選得用戶頭昏眼花，影響用戶體驗。所以就有了帶查詢的下拉框出現(xiàn)，這個下拉框的功能很強大，結(jié)合了輸入框和下拉框為一體，既可以進(jìn)行模糊查詢，又可以直接選擇，比以前的下拉框更加方便了。今天要介紹的就是layui的form表單組件里的帶查詢的下拉框。

用任何插件都需要引用相應(yīng)的css文件和js文件，在這就不多說了。但layui的form表單組件不僅要引用插件還需要加載相應(yīng)的模塊，少了這兩步操作，select、checkbox、radio等將無法顯示，并且無法使用form相關(guān)功能，下面就是加載的方法:

另外，還要在一個容器中設(shè)定 class="layui-form" 來標(biāo)識一個表單元素塊，如要使用帶搜索的下拉框只需在select標(biāo)簽添加一個”lay-search”屬性就可以了。

這就是綁定到了。

下拉框的數(shù)據(jù)一般是動態(tài)的，數(shù)據(jù)大多是從數(shù)據(jù)庫中查詢出來再綁定到下拉框的。為了方便，綁定數(shù)據(jù)的方法一般寫在一個方法里方便使用。

方法的參數(shù)一般有三個，一個是select標(biāo)簽的id，一個是查詢數(shù)據(jù)的路徑，還有一個是可有可無的選中值。其實方法里面就是由一個post請求構(gòu)成的，構(gòu)建一個動態(tài)下拉框大致分為兩步，第一步請求數(shù)據(jù)，第二步把查詢到的數(shù)據(jù)拼接到下拉框里。

請求數(shù)據(jù)就是直接一個post請求，把傳進(jìn)來的路徑拼接到post請求的路徑中就可以了。

拼接select內(nèi)容這一步就是在post請求的回調(diào)函數(shù)里進(jìn)行的，遍歷查詢到的數(shù)據(jù)用方法append()一個個的拼接到select里面，在拼接之前要先拼接一個value值為空的選項，這個選項是給請選擇預(yù)留的，否則一開始就會選中拼接的第一個數(shù)據(jù)，導(dǎo)致一些不需要選擇的數(shù)據(jù)沒辦法取消選擇。

還有就是選中值，首先要判斷傳過來的選中值是否為空，不為空再設(shè)置select的val值。

如果要用layui的下拉框那就必須添加多一段代碼，就是重載表單：form,render();。如果不加這一句代碼的會導(dǎo)致下拉框的數(shù)據(jù)時有時無，綁定的數(shù)據(jù)漂浮不定，一會綁定成功一會綁定失敗。

以上這篇Layui帶搜索的下拉框的使用以及動態(tài)數(shù)據(jù)綁定方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論