一、监听单选按钮事件
点击资源类型单选按钮时,请求后台接口,把接口返回的内容追加到选择资源下拉框内
HTML
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
javascript
// 监听
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
html
<select name="public_kejian_id" lay-search="" lay-filter="source" lay-verify="required" id="kejian_opt">
</select>
JQ 获取当前选中的value值和对应的文本
javascript
// 监听下拉框
form.on('select(source)',function (data) {
console.log('选中的id:'+data.value)
var selectedText = data.elem[data.elem.selectedIndex].text;
console.log('选中的文字:' + selectedText);
})
欢迎关注收藏,持续更新 ~