解决layui中onchange失效以及form动态渲染失效的问题

layui中onchange事件失效原因

在近期使用layui框架开发城市三级级联功能时，发现jQuery原生的onchange事件方法在layui环境中无法正常工作。

查阅layui社区文档后得知，layui对控件变化的监控提供了专门的监听机制。

静态控件监听实现

HTML结构部分：

<select lay-filter="test"></select>

JavaScript逻辑部分：

var form = layui.form();
form.on('select(test)', function(data){
 console.log(data);
});

按照上述方式配置，即可实现预期的监听效果。

动态表单渲染解决方案

在处理动态拼接内容并给控件赋值时，layui相比jQuery多了一个必要的步骤。

动态内容渲染步骤

jQuery的传统做法：

$('#city').append('<option value=' + value + '>' + value + '</option>');
layer:

$('#city').append('<option value=' + value + '>' + value + '</option>');

完成动态拼接后，必须调用以下代码：

form.render();

页面才能正确渲染出动态拼接的内容。

以上关于解决layui中onchange失效以及form动态渲染失效的内容分享完毕，希望能为读者提供参考，并欢迎大家继续支持本站。