說(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表單組件里的帶查詢的下拉框。

主要從事網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、成都響應(yīng)式網(wǎng)站建設(shè)公司、程序開(kāi)發(fā)、微網(wǎng)站、小程序定制開(kāi)發(fā)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了豐富的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷(xiāo)經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷(xiāo)、管理等多方位專業(yè)化運(yùn)作于一體，具備承接不同規(guī)模與類型的建設(shè)項(xiàng)目的能力。

用任何插件都需要引用相應(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è)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞名稱：Layui帶搜索的下拉框的使用以及動(dòng)態(tài)數(shù)據(jù)綁定方法-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://aaarwkj.com/article14/gosge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、微信公眾號(hào)、外貿(mào)建站、移動(dòng)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)