1:监听select 改变
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!-- 不用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 复选框
1
2
3
4
5
6
|
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 开关
1
2
3
4
5
6
|
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 单选框
1
2
3
4
|
form. on ( 'radio(filter)' , function(data){ console.log(data.elem); //得到radio原始DOM对象 console.log(data.value); //被点击的radio的value值 }); |
5:监听submit 提交
1
2
3
4
5
6
7
|
<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 ; //阻止表单跳转。如果需要表单跳转,去掉这段即可。 }); |