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

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

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

這就是綁定到了。

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

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

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

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

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

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

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

最新評(píng)論