本文详解Layui中select下拉列表的change事件监听方法。通过设置lay-filter指定监听元素，利用form.on获取选中值，并重点讲解form.render('select')在动态修改选项后的强制渲染作用，确保UI同步更新。
Layui事件过滤器与监听机制
Layui的事件机制默认监听所有表单元素，若需精准控制监听范围，可借助事件过滤器进行限定。
具体实现方式是在目标select标签中添加lay-filter属性，例如：<select lay-filter="test"></select>。
接下来演示如何监听select元素的值变化。
select change事件回调与渲染处理
当下拉选项被切换时触发回调，该函数接收一个object参数，其中包含三个关键成员：
关键步骤：必须调用form.render('select')进行重新渲染，否则界面操作可能无法生效。此处'select'为固定参数，意指渲染下拉列表，若不传参则默认渲染所有表单。
具体代码语法如下所示。
form.on('select(filter)', function(data){
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
});
form.on('select(search_type)', function(data){
var html_one='<option value="1">充值</option><option value="2">还本付息</option>';
if(data.value == 1){
$("#search_detail").html(html_one);
form.render('select');
}else if(data.value == 2){
var html_two='<option value="3">提现</option><option value="4">购买产品</option>';
$("#search_detail").html(html_two);
form.render('select');//select是固定写法 不是选择器
}
});
代码示例中的'search_type'对应HTML中下拉列表的lay-filter属性值。
lay-filter="search_type"
以上内容为Layui下拉列表change事件的完整解析，旨在提供实用参考，欢迎收藏支持。