对layui中表单元素的使用详解


Posted in Javascript onAugust 15, 2018

首先不管是单选框还是复选框或者是下拉框,都要在你写的标签外面套一层div或者是form标签,如:

<div class="layui-input-block">
<input type="radio" name="sex" value="0" title="男">
</div>,class属性是固定写法。

这样写好了以后,你如果是写在静态页面,这样式可以看见效果,如果写在js里,这样写了还有一步得写,那就是

var form = layui.form();
form.render("select"); //更新全部

这样写是外面套的是form标签,如果是div,就写layui.div();即可。

对于下拉框的事件的使用,语法form.on('event(过滤器值)', callback);

也可写成

var form=layui.form();

form.on('select(addywlb)', function(data){}),这里面的选中的值可以直接data.value;关于data里的数据结构,感兴趣可以console.log(data);打印出看看。获取选中的其他的属性值,和普通的用法一样,$("#cxYearBegin option:selected").attr("year");对了,关于select()括号里的值是这样来的 <select name="modules" lay-verify="required" lay-filter="cxYearBegin" lay-search="" id="cxYearBegin" >,根据这个lay-filter属性来获取。

如果是复选框的事件,就可以这样写

form.on('checkbox(filter)', function(data){});

如果是单选按钮是这样写:

form.on('radio(filter)', function(data){});

如果是开关按钮,事件是一样的:

form.on('switch(filter)', function(data){});

其中括号里的值都是通过lay-filter这个属性值来获取。

以上这篇对layui中表单元素的使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 #jQuery
vue生命周期实例小结
Aug 15 #Javascript
layui获取多选框中的值方法
Aug 15 #Javascript
layui radio性别单选框赋值方法
Aug 15 #Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 #Javascript
LayUI表格批量删除方法
Aug 15 #Javascript
layui中table表头样式修改方法
Aug 15 #Javascript
You might like
php处理斐波那契数列非递归方法
2012/02/04 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
javascript 获取图片颜色
2009/04/05 Javascript
javascript读写json示例
2014/04/11 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
求职简历自我评价范例
2014/03/12 职场文书
班组长竞聘书
2014/03/31 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
离婚答辩状范文
2015/05/22 职场文书
MySQL慢查询优化解决问题
2022/03/17 MySQL
Python借助with语句实现代码段只执行有限次
2022/03/23 Python
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL