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; //阻止表單跳轉。如果需要表單跳轉,去掉這段即可。
});
