layui 级联下拉框动态数据

最新推荐文章于 2025-06-16 16:30:23 发布

Aimyone

最新推荐文章于 2025-06-16 16:30:23 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/qq_36636312/article/details/102785655

layui 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种基于layui框架的级联下拉框实现方式，前端通过监听select选择事件，利用ajax请求后端获取对应的数据，动态填充下一级下拉框。后端通过接收前端传递的参数，查询数据库并返回相应的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，展示图

在这里插入图片描述

2，前端代码


   <div class="layui-form-item">
       <label class="layui-form-label">分发包</label>
       <div class="layui-input-inline">
           <select name="outpackage" id="outpackage" required lay-verify="required" lay-filter="outgivingversion">
               <option value="">请选择分发包</option>
               <option th:each="item : ${lists}" th:value="${item.id}"
                       th:text="${item.appname}">
               </option>
           </select>
       </div>
       <div class="layui-input-inline">
           <select name="version" id="version" required lay-verify="required" >
               <option value="">请选择分发包的版本号</option>
           </select>
       </div>
   </div>

   //级联子项目
    //select 监听
    form.on('select(outgivingversion)',function(data){
        var value=data.value;  //select选中的值
        $.ajax({
            url:'/outgiving/select2?id='+value,
            method:'post',
            data:value,
            dataType:"JSON",
            success:function(res){
                $("#version").empty();
                res.namelists.forEach(function (obj) {
                    $("#version").append(new Option(obj.appversion,obj.id));
                })
                layui.form.render("select");
            }
        });

    });
}

3，后端代码


  //分发文件2，级联下拉框,根据一级下拉框的name值寻找二级下拉框的值
   @RequestMapping(value = "select2")
   @ResponseBody
   public HashMap  select2(String id) {
       if(!StringUtil.isNullOrSpace(id)) {
           ReleaseAppverEntity appname=releaseAppverEntityDao.findById(id).get();
           List<ReleaseAppverEntity > namelists=releaseAppverEntityDao.findByAppname(appname.getAppname());
           HashMap<Object, Object> map = new HashMap<>();
           map.put("namelists",namelists);
           return map;
       }
       return null;
   }