Layui select 的动态添加

最新推荐文章于 2024-09-06 16:13:14 发布

laizhixue

最新推荐文章于 2024-09-06 16:13:14 发布

阅读量1.3w

点赞数 12

分类专栏： LayUi前端框架文章标签： select动态添加数据

本文链接：https://blog.csdn.net/laizhixue/article/details/84621326

版权

LayUi前端框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

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

前台 select代码：

<div class="layui-form-item">
       <label class="layui-form-label">类别</label>
       <div class="layui-input-inline">
             <select id="GoodsModifyModel_GoodsCategorySel" lay-verify="required" lay-search="">
            @*动态添加类别*@
            </select>
        </div>
</div>

layui select生成的完整代码：

<div class="layui-input-inline">
    <select id="GoodsAddModel_GoodsCategorySel">
        <option value="">直接选择或搜索选择</option>
        <option value="1">笔记本</option>
        <option value="2">台式电脑</option>
        <option value="3">鼠标</option>
        <option value="4">键盘</option>
    </select><div class="layui-unselect layui-form-select">
    <div class="layui-select-title">
        <input type="text" placeholder="直接选择或搜索选择" value="" readonly="" class="layui-input layui-unselect">
        <i class="layui-edge"></i>
    </div>
    <dl class="layui-anim layui-anim-upbit">
        <dd lay-value="" class="layui-select-tips">直接选择或搜索选择</dd>
        <dd lay-value="1" class="">笔记本</dd>
        <dd lay-value="2" class="">台式电脑</dd>
        <dd lay-value="3" class="">鼠标</dd>
        <dd lay-value="4" class="">键盘</dd>
    </dl>
    </div> 
 </div>

动态添加select 的代码如下所示:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>评论层模板</title>
    <link rel="stylesheet" type="text/css" href="~/layui/css/layui.css" />
</head>
<body>
    <form class="layui-form" id="userModiForm" style="width:360px;">
        <div class="layui-form-item" style="margin-top:5px">
            <label class="layui-form-label">商店</label> 
            <div class="layui-input-inline">
                 <select id="GoodsAddModel_ShopSel" lay-verify="required" lay-search=""></select> 
            </div> 
        </div> 
        <div class="layui-form-item" style="margin-top:5px">
            <label class="layui-form-label">类别</label> 
            <div class="layui-input-inline">
              <select id="GoodsAddModel_GoodsCategorySel" lay-verify="required" lay-search=""></select> 
            </div> 
        </div> 
    </form>
</body>
</html>
<script src="~/PageUI/MyInfoIndexUi/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="~/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function () {
        GetGoodsCategoryToSel();
        GetShopToSel();
    })
    //获取类别
    function GetGoodsCategoryToSel() {
        $.ajax({
            url: "/Goods/GetGoodsCategory",
            data: {},
            type: "post",
            async: false,
            success: function (data) {
                if (data != "" && data != null) {
                    layui.use(['layer', 'form'], function () {
                        var form = layui.form;
                        var length = data.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="' + data[i].CategoryId + '">' + data[i].CategoryName + '</dd>';
                            html2 += '<option value="' + data[i].CategoryId + '">' + data[i].CategoryName + '</option>';
                        }
                        $("#GoodsAddModel_GoodsCategorySel").next().children().eq(1).html(html1);
                        $("#GoodsAddModel_GoodsCategorySel").html(html2);

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

                }
            }
        });
    }
    //获取商店
    function GetShopToSel() {
            $.ajax({
                url: "/Shop/GetAllShop",
                async: false,
                type: "post",
                datatype: "json",
                data: {},
                success: function (data) {
                    if (data != "" && data != null) {
                        layui.use(['layer', 'form'], function () {
                            var form = layui.form;
                            var length = data.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="' + data[i].ShopId + '">' + data[i].ShopName + '</dd>';
                                html2 += '<option value="' + data[i].ShopId + '">' + data[i].ShopName + '</option>';
                            }
                            $("#GoodsAddModel_ShopSel").next().children().eq(1).html(html1);
                            $("#GoodsAddModel_ShopSel").html(html2);

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

                    }
                }
            });
    }

    $('#CloseIframe').click(function () {
        //注意：parent 是 JS 自带的全局对象，可用于操作父页面
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(index);
    });

</script>