前端笔记-小鱼博客 · 一个小小程序员的世界

小鱼Blog

您现在的位置是:首页 > 个人博客 > 前端笔记

前端笔记

layui动态新增元素,选中时候没有反应怎么回事?

2021-04-28 前端笔记 316
layui动态新增元素,选中时候没有反应怎么回事?如何让动态新增的元素(option)或者chekbox有效?

        layui动态新增元素,选中时候没有反应怎么回事?如何让动态新增的元素(option)或者chekbox有效?

        大家用layui框架开发的时候,遇到动态新增的option或者复选框,虽然显示了,但是无法被选中!这是怎么回事呢?

        那是因为layui中动态新增的元素是需要再数据新增后,重新再渲染一遍的。那如何渲染呢?layui给了一个form.render()方法!

        代码如下:

        动态新增元素代码:

$.ajax({
            url:"地址",  //后台地址
            type:"GET",    //  请求方式
            data:"",    //请求参数
            dataType:"json",    //设置接收到的响应数据的格式
            contentType : "application/json",
            // async:"",是否异步
            success:function (data) { //响应后的回调函数
                var len = data.length;
                var str = "<option value=''></option>";
                var  select = $("#spotsareaname");
                for (var i = 0;i<len;i++){
                    //select.add(new Option(data[i].areaname,data[i].areaid))
                    str+="<option value='"+data[i].areaid+"'>"+data[i].areaname+"</option>";
                }
                select.append(str);
                renderForm();//渲染方法
            }
        })

        渲染表单代码如下:

//重新渲染表单
    function renderForm() {
        layui.use('form', function () {
            var form = layui.form;
            form.render();
        });
    }

        完成后,再ctrl+f5刷新下,可以看到已经成功了!

文章评论

317 人参与,0条评论
暂无评论!期待你的回答!