layui框架form表单select无法渲染问题的解决方案

在layui框架中使用form.on方法绑定select下拉框选中事件,form.on()方法不执行,表现为select下拉框渲染失败,选中值无法保存等, 解决方法有以下几点: 

1.html中form标签中要有class=layui-form”,否则不生效 ;特别重要;

2.form.on方法必须放在layui.use({})里

layui.use(['form', 'layer'], function () {
form.on('select(XXX)', function (data) {});
}); 

3.select标签中要有lay-filter属性,用来监听select;

 $(function() {

            layui.use('form', function() {

                $('form').addClass('layui-form');//如果无法改动html增加class,可以在这里给form赋值class

                var form = layui.form;

                form.render();

                form.on('select', function(data) {

                    if (data.elem.onchange) {

                        data.elem.onchange();

                        form.render();

                    }

                });

                //恢复全选效果,www.99xq.cn

                form.on('checkbox', function(data) {

                    if (data.elem.onclick) {

                        data.elem.onclick();

                        form.render();

                    } else {

                        console.info($(this).attr('checked'));

                        if (!$(this).is(':checked')) {

                            $(this).removeAttr('checked');

                        } else {

                            $(this).attr('checked', true);

                        }

                        //form.render();

                    }

                });

                form.on('radio', function(data) {

                    if (data.elem.onclick) {

                        data.elem.onclick();

                        form.render();

                    }

                });

                //表单提交时候重渲染,否则数据无法存储,转载自https://www.99xq.cn

                form.on('submit', function(data) {

                    form.render();

                    return true;

                });

            });

        })

发表评论

电子邮件地址不会被公开。 必填项已用*标注