实现页面中搜索的三级联动

最新推荐文章于 2023-08-12 22:56:39 发布

weixin_40214184

最新推荐文章于 2023-08-12 22:56:39 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_40214184/article/details/88421939

本文介绍了如何在页面中实现三级联动的搜索功能，包括一级分类的选择，查找子类的方法，以及如何进行精确查找，主要涉及多级数据的关联操作。

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

1、

2、

3、一级分类

//一级分类
     $("#parentsId").change(function(){
    	var parentId=$("#parentsId").val();
    	var showId=$("#secondLevelid");
    	$("#secondLevelid").empty();
    	$("#threeLevelId").empty();
    	var optStr="<option value='0'>二级分类</option>";
    	var secondStr="<option value='0'>三级分类</option>";
    	$("#secondLevelid").append(optStr);
    	$("#threeLevelId").append(secondStr);
    	requestCalss(parentId,showId);
    	
     });
     $("#secondLevelid").change(function(){
    	var secondLevelid=$("#secondLevelid").val();
    	var threeLevelId=$("#threeLevelId");
    	$("#threeLevelId").empty();
    	var optStr="<option value='0'>三级分类</option>";
    	$("#threeLevelId").append(optStr);
    	requestCalss(secondLevelid,threeLevelId);
     });

4、查找子类

// 查找子类地址
     
     function requestCalss(code,showId){
     	var url="${base}/admin/tproduct/findChildClass.json";
     	$.ajax({
     		type: "post",
     		async: true,
     		url: url,
     		data: "id=" + code ,
     		timeout: 1000,
     		dataType: "json",
     		success: function(data) {
     			if(data.code==='1'){
     				var dataAttr=data.object;
     				for(var i=0;i<dataAttr.length;i++){
     					var optStr="<option value='"+dataAttr[i].id+"'>"+dataAttr[i].name+"</option>";
     					showId.append(optStr);
         			}
     			}
     		},
     		error: function() {
     		}
     	});
     }

5、书写一个方法，查找子类（这边是二张表，现在查找的是分类表中的数据）