layui-select change监听

 

上次代码完成了select动态渲染的功能

如果用户点击其中一个文件 要触发相应的效果 

此时需用到form.on监听功能 

//select监听
layui.use(['form'], function () {
var form = layui.form();
//监听select change状态
form.on('select(test1)', function (data) {
//获取select的value值
var id = data.value;
//自定义iframe
var html = '<iframe src="/getData/pdfView/' + id + '"width="100%" height="100%" scrolling="no" marginheight="0" marginwidth="0"></iframe>'
//赋值
document.getElementById("two").innerHTML = html;
});
});

layui-filter 为test1 详情请看select动态渲染笔记

如果遇到form.on is not a function

请先检查js文件是否成功导入  另外需要注意 var form = layui.form() 高版本的haul是不需要()的

 

监听此select框 如果发生点击事件变化的话 会获取select中的value值

然后通过所获取的value值 

重新拼接<iframe>代码

获取id为two的旧的iframe框架  赋值为新的 

就会实现点击指定附件 相应的iframe框架就会显示指定的pdf在线预览