hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

【WEB前端开发】layui事宜监听运用

2019-11-28后端开发ki4网23°c
A+ A-

在运用layui的form表单做考证提交的时刻,假如连系vue,或许是三级联动的时刻,就须要做事宜监听了。

细致语法:

form.on('event(过滤器值)', callback);

能够用于监听:select,checkbox,switch,radio,submit 的转变

一、监听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>

同理,监听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对象
});

监听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对象
});

监听radio单选:

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

监听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; //阻挠表单跳转。假如须要表单跳转,去掉这段即可。
});

更多layui学问请关注layui运用教程栏目。

以上就是layui事宜监听运用的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
【WEB前端开发】layui事宜监听运用

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>