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 15 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
angular中的cookie读写方法
Aug 02 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP实现股票趋势图和柱形图
2015/02/07 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
详解JavaScript树结构
2017/01/09 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
快速解决brew安装特定版本flow的问题
2018/05/17 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Python如何实现FTP功能
2020/05/28 Python
如何理解Python中的变量
2020/06/01 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
实习生个人的自我评价
2013/12/08 职场文书
建材业务员岗位职责
2013/12/08 职场文书
外企求职信范文分享
2013/12/31 职场文书
国培远程培训感言
2014/03/08 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
产品开发计划书
2014/04/27 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
信用卡工资证明范本
2015/06/19 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电