获取数据库品类表，自动填充下拉列表

最新推荐文章于 2022-10-23 14:43:05 发布

YoungDreams

最新推荐文章于 2022-10-23 14:43:05 发布

阅读量415

点赞数

分类专栏：前端文章标签： layui 下拉列表前端

本文链接：https://blog.csdn.net/qq_36299991/article/details/101032553

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表单实现添加商品功能，直接拿数据库的品类字典，填充下拉列表的实现：

layui表单：

        <form class="layui-form">
            <!-- ...略 -->
            <div class="layui-form-item" pane>
                <label for="brandId" class="layui-form-label">
                    <span class="x-red">*</span>品牌</label>
                <div class="layui-input-inline">
                    <select id="brandId" name="brandId" lay-filter="brand">
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    必选项
                </div>
            </div>

            <div class="layui-form-item" pane>
                <label for="cgId" class="layui-form-label">
                    <span class="x-red">*</span>品类</label>
                <div class="layui-input-inline">
                    <select id="cgId" name="cgId" lay-filter="cate">
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    必选项
                </div>
            </div>

            <!-- ...略 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>

                </div>
            </div>
        </form>

js:

<script>
    layui.use(['form','jquery'], function(){
        var form = layui.form,$=layui.$;
        //动态添加下拉框 同时可以设置默认值
        $.ajax({
            url:'/showallcate',//从后台拿到所有种类
            dataType:'json',
            //type:'post',
            success:function(data){
                $.each(data,function(index,item){
                    console.log(item);
                    console.log(item.cgName,item.cgId);
                    //option 第一个参数是页面显示的值，第二个参数是传递到后台的值
                    $('#cgId').append(new Option(item.cgName,item.cgId));//往下拉菜单里添加元素
                    //设置value（这个值就可以是在更新的时候后台传递到前台的值）为1的值为默认选中
                    //$('#cgId').val(1);
                    $('#cgId').val("--请选择--");
                })
                form.render(); //更新全部表单内容
                //form.render('select'); //刷新表单select选择框渲染
            }
        });
    });

</script>

需要注意的是：

//option 第一个参数是页面显示的值，第二个参数是传递到后台的值
$('#cgId').append(new Option(item.cgName,item.cgId));//往下拉菜单里添加元素

item.cgName，我们添加商品，提交表单时是传这个值到后台。

//设置value（这个值就可以是在更新的时候后台传递到前台的值）为1的值为默认选中
$('#cgId').val("--请选择--");