layui select下拉框动态加载失败 无数据

首先看实现效果:
在这里插入图片描述

在这里插入图片描述
layui的select 若已经给了选项的数据,它还会动态生成另外一段代码:

<dl class="layui-anim layui-anim-upbit"/>

想自己添加动态的数据,则我们也需要添加:

<dl class="layui-anim layui-anim-upbit"/>

的选项数据,否则,select会失效。

$("#GoodsModifyModel_GoodsCategorySel").next().children().eq(1):可找到动态生成的dl标签,用于添加dd标签

$("#typeId").next().children().eq(1).html(html1);//layui动态生成的<dl class="layui-anim layui-anim-upbit"/>的选项数据
$("#typeId").html(html2);//自己的select选项数据

具体使用如下:

<td>资源类别</td>
<td >
     <select id="typeId" name="typeId" lay-verify="required">
     </select>
</td>
	$(function () {
        GetArticleType();
    })
    //获取资源类别
    function GetArticleType() {
        $.ajax({
            url: "/admin/articleType/list",
            data: {},
            type: "post",
            async: false,
            success: function (data) {
                if (data != "" && data != null) {
                    layui.use(['layer', 'form'], function () {
                        debugger
                        var form = layui.form;
                        var list = data.articleTypeList;
                        var length = list.length;

                        var html1 = '<dd lay-value="" class="layui-select-tips layui-this">请选择一个资源类别</dd>';
                        var html2 = '<option value="" >请选择一个资源类别</option>';
                        for (var i = 0; i < length; i++) {
                            html1 += '<dd lay-value="' + list[i].id + '">' + list[i].typeName + '</dd>';
                            html2 += '<option value="' + list[i].id + '">' + list[i].typeName + '</option>';
                        }

                        $("#typeId").next().children().eq(1).html(html1);
                        $("#typeId").html(html2);
                        form.render();//没有写这个,操作后没有效果
                    });

                }
            }
        });
    }

发布了98 篇原创文章 · 获赞 7 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_37767455/article/details/103301920