Layui带搜索的下拉框的使用以及动态数据绑定方法_layui带搜索的下拉框的使用以及动态数据绑定方法,layui搜索下拉框动态数据 - CSDN文库

1星 179 浏览量更新于2023-03-03 评论 1 收藏 50KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Layui带搜索的下拉框的使用以及动态数据绑定方法带搜索的下拉框的使用以及动态数据绑定方法

今天小编就为大家分享一篇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带搜索的下拉框的使用以及动态数据绑定方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也

希望大家多多支持我们。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论2

qq_28825365

2020-11-19

好小子浪费我五分钟外加6个C币。

weixin_38617451

粉丝: 4
资源: 903

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈