1:监听select 改变

<!-- 不用form 用div也可以 -->
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">听歌</option>
<option value="4">游戏</option>
</select>
</div>
</div>
</form>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript">
layui.use('form', function(){
var form = layui.form;
form.on('select(aihao)',function(data){
console.log(data);
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
});
</script>

  

2:监听checkbox 复选框

form.on('checkbox(filter)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象
console.log(data.elem.checked); //是否被选中,true或者false
console.log(data.value); //复选框value值,也可以通过data.elem.value得到
console.log(data.othis); //得到美化后的DOM对象
});

  

3:监听switch 开关

form.on('switch(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM对象
  console.log(data.elem.checked); //开关是否开启,true或者false
  console.log(data.value); //开关value值,也可以通过data.elem.value得到
  console.log(data.othis); //得到美化后的DOM对象
});

  

4:监听radio 单选框

form.on('radio(filter)', function(data){
console.log(data.elem); //得到radio原始DOM对象
console.log(data.value); //被点击的radio的value值
});

  

5:监听submit 提交

<button lay-submit lay-filter="*">提交</button>
form.on('submit(*)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});

  

最新文章

  1. ubuntu安装ANSYS17.2全过程
  2. Android keycode列表
  3. eclipse各版本代号
  4. 内核编译选配(VMware篇)
  5. hibernateTemplate.find或hibernateTemplate.save()执行操作没有反应,但是有sql语句
  6. BurpSuite之HTTP brute暴力破解
  7. SharePoint 跨域还原网站一则
  8. 教程-Close、Halt、terminate、ExitProcess的区别
  9. POJ 1789 Truck History (最小生成树)
  10. 从Go、Swift出发:语言的选择需谨慎
  11. ThinkPHP - 博客获取列表信息
  12. Hexo站点之域名配置
  13. python --- 冒泡排序算法
  14. Django 数据库查询集合(双下划线连表操作)
  15. java后台动态生成导出excel
  16. 使用Spring+MySql实现读写分离(一)关于windows下安装mysql5.6
  17. 1-hadoop安装、ssh、节点退役与服役
  18. kubernetes备份和恢复
  19. 600字让你读懂Git
  20. ie7 z-index 失效问题

热门文章

  1. hihoCoder 1039 字符消除 最详细的解题报告
  2. leetcode_1-两数之和_javascript
  3. springboot使用maven命令打包jar及配置文件配置
  4. Harbor打怪升级
  5. 像写Flutter一样开发Android原生应用
  6. Bash 脚本编程
  7. jupyter中%matplotlib inline报错
  8. centos7 安装 isign
  9. 最长不下降代码dp
  10. Python创建字符串