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();//没有写这个,操作后没有效果
                    });

                }
            }
        });
    }

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用layui框架进行动态添加下拉框组件并动态渲染数据时,可以使用下面的代码实现: HTML代码: ```html <div class="layui-form-item"> <label class="layui-form-label">下拉框:</label> <div class="layui-input-block"> <select name="select" lay-filter="select"> <option value="">请选择</option> </select> </div> </div> ``` JavaScript代码: ```javascript layui.use(['form', 'jquery'], function(){ var form = layui.form; var $ = layui.jquery; // 动态渲染下拉框数据 function renderSelect() { var data = [{value: 1, text: '选项1'}, {value: 2, text: '选项2'}, {value: 3, text: '选项3'}]; var select = $('select[name=select]'); select.empty(); select.append('<option value="">请选择</option>'); layui.each(data, function(index, item){ select.append('<option value="'+ item.value +'">'+ item.text +'</option>'); }); form.render('select'); } // 动态添加下拉框组件 function addSelect() { var html = '<div class="layui-form-item">'+ '<label class="layui-form-label">下拉框:</label>'+ '<div class="layui-input-block">'+ '<select name="select" lay-filter="select">'+ '<option value="">请选择</option>'+ '</select>'+ '</div>'+ '</div>'; $('.layui-form').append(html); renderSelect(); } // 初始化页面 renderSelect(); // 点击按钮添加下拉框组件 $('#addSelect').click(function(){ addSelect(); }); // 监听下拉框选中事件 form.on('select(select)', function(data){ console.log(data.value + ' ' + data.elem[data.elem.selectedIndex].text); }); }); ``` 在上述代码中,首先使用`layui.use`方法加载`form`和`jquery`模块,然后定义了两个函数`renderSelect`和`addSelect`,分别用于动态渲染下拉框数据动态添加下拉框组件。在`renderSelect`函数中,通过定义一个数据数组,然后遍历该数组,动态添加下拉框选项,并调用`form.render('select')`方法进行渲染。在`addSelect`函数中,通过拼接HTML代码,动态添加一个下拉框组件,并调用`renderSelect`函数进行数据渲染。最后,在页面加载完毕后,调用`renderSelect`函数进行初始化,并监听下拉框选中事件,输出选中的值和文本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值