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中的call实现继承
Jan 22 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 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
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
numpy数组广播的机制
2019/07/12 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
html5实现滑块功能之type="range"属性
2020/02/18 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
工地门卫岗位职责
2013/12/30 职场文书
小学生自我评价范文
2014/01/25 职场文书
法律进企业活动方案
2014/03/04 职场文书
检讨书模板
2015/01/29 职场文书
档案工作个人总结
2015/03/03 职场文书
写给导师的自荐信
2015/03/06 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书