【前端】LayUI监听事件汇总

一、监听单选按钮事件

点击资源类型单选按钮时，请求后台接口，把接口返回的内容追加到选择资源下拉框内

HTML

<div class="layui-form-item">
    <label class="layui-form-label">资源类型：</label>
    <div class="layui-input-inline" style="width: 50%">
        <input type="radio" name="kind" lay-filter="kindradio" value="1" title="课件">
        <input type="radio" name="kind" lay-filter="kindradio" value="2" title="视频">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">选择资源：</label>
    <div class="layui-input-inline" style="width: 50%">
        <select name="public_kejian_id" lay-search="" lay-filter="source"  lay-verify="required" id="kejian_opt">
                                    
        </select>
    </div>
</div>

JQ

// 监听
form.on('radio(kindradio)',function (data) {
    // 清空下拉框内容
    $('#kejian_opt').empty();
    var section_id = $('[name="section_id"]').val()
    console.log(data)    
    $.ajax({
        url:'getKejianVideo',
        type:'POST',
        dataType:'JSON',
        data:{kind:data.value,section_id:section_id},
        success:function (res) {
            console.log(res)
            if (res.code == '200') {
                if (data.value == '1') {
                    var tag = '课件';
                }else if (data.value == '2') {
                    var tag = '视频';
                }
                var html = "<option value=''>--直接选择或搜索选择--</option>";  
                $(res.data).each(function (v, k) {  
                    html += "<option value='" + k.id + "'>【"+tag+"】"+k.filename+"</option>";  
                });  
                //把遍历的数据放到select里面  
                $("#kejian_opt").append(html);
            }else{
                layer.msg(res.message)
            }  
            //重新刷新了一下下拉框  
            form.render('select'); 
        }
    })
})

二、监听下拉框事件

HTML

<select name="public_kejian_id" lay-search="" lay-filter="source"  lay-verify="required" id="kejian_opt">
                                    
</select>

JQ 获取当前选中的value值和对应的文本

// 监听下拉框
form.on('select(source)',function (data) {
    console.log('选中的id：'+data.value)
    var selectedText = data.elem[data.elem.selectedIndex].text;
    console.log('选中的文字：' + selectedText);
})

欢迎关注收藏，持续更新 ~