JQuery实现多级联动效果

最新推荐文章于 2025-06-05 12:50:38 发布

原创最新推荐文章于 2025-06-05 12:50:38 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了一种使用JavaScript实现的级联菜单功能，通过Ajax获取数据并动态填充下拉列表，实现了从一级到三级菜单的选择联动效果。

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

JS代码

(function(){(function(){ $(function(){$ .post("getItemCatList.action",null,function(data){ var str="";

.each(data,function(index,info)str+=""+info[′name′]+"";).each(data,function(index,info)str+=""+info[′name′]+"";) $.each(data,function(index,info){ str+=""+info['name']+""; })$ ("#c1").append(str); })

("#c1").change(function(){
               $("#c2").empty();
               $.post("getItemCatList.action",{parentId:$(this).val()},function(data){
                   var str="";
                   $.each(data,function(index,info){
                       str+=""+info['name']+"";
                   })
                   $("#c2").append(str);
               })
           })("#c1").change(function(){               $("#c2").empty();               $.post("getItemCatList.action",{parentId:$(this).val()},function(data){                   var str="";                   $.each(data,function(index,info){                       str+=""+info['name']+"";                   })                   $("#c2").append(str);               })           }) $("#c1").change(function(){ $("#c2").empty(); $.post("getItemCatList.action",{parentId:$(this).val()},function(data){ var str=""; $.each(data,function(index,info){ str+=""+info['name']+""; }) $("#c2").append(str); }) })$ ("#c2").change(function(){

("#c3").empty();("#c3").empty(); $("#c3").empty();$ .post("getItemCatList.action",{parentId:

(this).val()},function(data){
var str="";(this).val()},function(data){ var str=""; $(this).val()},function(data){ var str="";$ .each(data,function(index,info){ str+=""+info['name']+""; }) $("#c3").append(str); }) }) })

一级菜单
未选择

二级菜单
未选择

三级菜单
未选择

Java代码
@Autowired
private ItemCatService itemCatService;

@RequestMapping("getItemCatList")
@ResponseBody
public List<TbItemCat> getItemCatList(@RequestParam(value = "parentId", defaultValue = "0") long parentId) {
    return itemCatService.getByParentId(parentId);
}

表:
表关系设计