layui 事件监听触发
2024-08-31 12:14:01
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; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});
最新文章
- ubuntu安装ANSYS17.2全过程
- Android keycode列表
- eclipse各版本代号
- 内核编译选配(VMware篇)
- hibernateTemplate.find或hibernateTemplate.save()执行操作没有反应,但是有sql语句
- BurpSuite之HTTP brute暴力破解
- SharePoint 跨域还原网站一则
- 教程-Close、Halt、terminate、ExitProcess的区别
- POJ 1789 Truck History (最小生成树)
- 从Go、Swift出发:语言的选择需谨慎
- ThinkPHP - 博客获取列表信息
- Hexo站点之域名配置
- python --- 冒泡排序算法
- Django 数据库查询集合(双下划线连表操作)
- java后台动态生成导出excel
- 使用Spring+MySql实现读写分离(一)关于windows下安装mysql5.6
- 1-hadoop安装、ssh、节点退役与服役
- kubernetes备份和恢复
- 600字让你读懂Git
- ie7 z-index 失效问题