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


Posted in Javascript onSeptember 28, 2019

说起下拉框大家一定不陌生,就是放着指定内容的容器需要什么就直接选择就可以了,很方便。但是凡事都有利弊两面,在数据少的时候是挺方便的但是数据一多起来就选得用户头昏眼花,影响用户体验。所以就有了带查询的下拉框出现,这个下拉框的功能很强大,结合了输入框和下拉框为一体,既可以进行模糊查询,又可以直接选择,比以前的下拉框更加方便了。今天要介绍的就是layui的form表单组件里的带查询的下拉框。

用任何插件都需要引用相应的css文件和js文件,在这就不多说了。但layui的form表单组件不仅要引用插件还需要加载相应的模块,少了这两步操作,select、checkbox、radio等将无法显示,并且无法使用form相关功能,下面就是加载的方法:

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

另外,还要在一个容器中设定 class="layui-form" 来标识一个表单元素块,如要使用带搜索的下拉框只需在select标签添加一个”lay-search”属性就可以了。

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

这就是绑定到了。

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

下拉框的数据一般是动态的,数据大多是从数据库中查询出来再绑定到下拉框的。为了方便,绑定数据的方法一般写在一个方法里方便使用。

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

方法的参数一般有三个,一个是select标签的id,一个是查询数据的路径,还有一个是可有可无的选中值。其实方法里面就是由一个post请求构成的,构建一个动态下拉框大致分为两步,第一步请求数据,第二步把查询到的数据拼接到下拉框里。

请求数据就是直接一个post请求,把传进来的路径拼接到post请求的路径中就可以了。

拼接select内容这一步就是在post请求的回调函数里进行的,遍历查询到的数据用方法append()一个个的拼接到select里面,在拼接之前要先拼接一个value值为空的选项,这个选项是给请选择预留的,否则一开始就会选中拼接的第一个数据,导致一些不需要选择的数据没办法取消选择。

还有就是选中值,首先要判断传过来的选中值是否为空,不为空再设置select的val值。

如果要用layui的下拉框那就必须添加多一段代码,就是重载表单:form,render();。如果不加这一句代码的会导致下拉框的数据时有时无,绑定的数据漂浮不定,一会绑定成功一会绑定失败。

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

以上这篇Layui带搜索的下拉框的使用以及动态数据绑定方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
javascript代码简写的几种常用方式汇总
Aug 23 Javascript
layui的select联动实现代码
Sep 28 #Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 #Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 #Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 #Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 #Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 #Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 #Javascript
You might like
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
Python最长公共子串算法实例
2015/03/07 Python
Python生成数字图片代码分享
2017/10/31 Python
用python实现的线程池实例代码
2018/01/06 Python
python学习基础之循环import及import过程
2018/04/22 Python
python批量赋值操作实例
2018/10/22 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
鸿星尔克广告词
2014/03/21 职场文书
销售活动策划方案
2014/08/26 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
新生入学欢迎词
2015/01/26 职场文书
埃及王子观后感
2015/06/16 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript