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 UI DatePicker中z-index默认为1的解决办法
Sep 28 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
js实现3d悬浮效果
Feb 16 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
ES6学习教程之Promise用法详解
Nov 22 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注册登录系统简化版
2020/12/28 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
Javascript学习指南
2014/12/01 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
python实现xlsx文件分析详解
2018/01/02 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
详解python的四种内置数据结构
2019/03/19 Python
pandas删除指定行详解
2019/04/04 Python
python多线程http压力测试脚本
2019/06/25 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
大一新生军训时的自我评价分享
2013/12/05 职场文书
产品质量承诺书范文
2014/03/27 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
56句经典英文座右铭
2019/08/09 职场文书
Django drf请求模块源码解析
2021/06/08 Python
Python 统计序列中元素的出现频度
2022/04/26 Python