Layui帶搜索的下拉框的使用以及動態數據綁定方法

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

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

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

這就是綁定到了。

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

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

請求數據就是直接一個post請求，把傳進來的路徑拼接到post請求的路徑中就可以了。

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

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

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

以上這篇Layui帶搜索的下拉框的使用以及動態數據綁定方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。