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带搜索的下拉框的使用以及动态数据绑定方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也
希望大家多多支持我们。
weixin_38617451
- 粉丝: 3
- 资源: 904
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- ARM Cortex-A(armV7)编程手册V4.0.pdf
- ABB机器人保养总结解析.ppt
- 【超详细图解】菜鸡如何理解双向链表的python代码实现
- 常用网络命令的使用 ipconfig ping ARP FTP Netstat Route Tftp Tracert Telnet nslookup
- 基于单片机控制的DC-DC变换电路
- RS-232接口电路的ESD保护.pdf
- linux下用time(NULL)函数和localtime()获取当前时间的方法
- Openstack用户使用手册.docx
- KUKA KR 30 hA,KR 60 hA机器人产品手册.pdf
- Java programming with JNI
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论2