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 相关文章推荐
jQuery 拖动层(在可视区域范围内)
May 24 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 21 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
Get或Post提交值的非法数据处理
2006/10/09 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
php生成excel列序号代码实例
2013/12/24 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
2018/09/19 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python异常和文件处理机制详解
2016/07/19 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Django实现文件上传和下载功能
2019/10/06 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
python中如何进行连乘计算
2020/05/28 Python
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
Python文件操作的面试题
2013/06/22 面试题
实习护理工作自我评价
2013/09/25 职场文书
大学生实习自我鉴定
2013/12/11 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
搞笑老公保证书
2015/02/26 职场文书
四年级作文之植物
2019/09/20 职场文书