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

站长资源 2024/11/26 佚名

2 0 1

说起下拉框大家一定不陌生，就是放着指定内容的容器需要什么就直接选择就可以了，很方便。但是凡事都有利弊两面，在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花，影响用户体验。所以就有了带查询的下拉框出现，这个下拉框的功能很强大，结合了输入框和下拉框为一体，既可以进行模糊查询，又可以直接选择，比以前的下拉框更加方便了。今天要介绍的就是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带搜索的下拉框的使用以及动态数据绑定方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

Layui,搜索,下拉框,数据绑定

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

Layui选项卡制作历史浏览记录的方法

layui的select联动实现代码

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接