【前端】LayUI监听事件汇总

一、监听单选按钮事件

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

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);
})

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

相关推荐
网易独家音乐人Mike Zhou19 分钟前
【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现(Kalman Filter)
c语言·python·单片机·物联网·算法·嵌入式·iot
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o1 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年4 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder4 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架