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 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
JQuery魔力之$("tagName")与selector
Mar 05 Javascript
JS扩展方法实例分析
Apr 15 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
使用python爬取B站千万级数据
2018/06/08 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
基于python实现模拟数据结构模型
2020/06/12 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
计算机应用职专应届生求职信
2013/11/12 职场文书
办公室内勤工作职责
2013/12/11 职场文书
工作表现评语
2014/01/19 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
同意报考公务员证明
2015/06/17 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫
mysql 获取相邻数据项
2022/05/11 MySQL