爱4妮 jQuery + Ajax + json 级联省市县级联

最新推荐文章于 2020-07-06 21:37:44 发布

转载最新推荐文章于 2020-07-06 21:37:44 发布 · 1.9k 阅读

文章标签：

#json #ajax #jquery #function #image #javascript

Jquery 专栏收录该内容

9 篇文章

订阅专栏

本博客介绍了一种使用JavaScript实现的选择器联动机制，用于动态生成汽车配置选项，并实时展示对应汽车图片，实现用户友好的配置体验。

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

$(function (){
	
	 var sf = $(".carname").children("select");
	 var cy = $(".cartype").children("select");
	 var dx = $(".wheeltype").children("select");	
	 var carimg = $(".carimg");
	 sf.change(function (){
	 var pid =$(this).val();
		
	 carimg.hide();    
	  dx.parent().hide();
	  //省份不为空
	  if(pid !=""){	 
	  $.get("http://domain:8080/test/CardServlet?method=getcity&pids="+pid,function (data)
	  {
		 
		  if(data.length !=0)
		  {		  
			 	 cy.html("");
			 	 
			 	   $("<option value=''>请选择城市</option>").appendTo(cy);
			 	 
			 	   $.each(data,function(index,city)
		            {
		            	$("<option value='"+city.cid+"'>" +city.cname + "</option>").appendTo(cy);
		            });	 	 	 	
					cy.parent().show();
					sf.next().show();			
		  }	  	  	  
	  },"json");
	  }
	  //省份为空
	  else{
	        cy.parent().hide();
			sf.next().hide();	
	  }
	  });
	  
	  //城市下拉框
	  cy.change(function (){
	 
	   var cid =$(this).val();
	  
	  dx.parent().show();
	  carimg.hide();
	  //城市不为空
	  if(cid !=""){
	 
	  $.get("http://domain:8080/test/CardServlet?method=getarea&cids="+cid,function (data)
	  {
		 
		  if(data.length !=0)
		  {		  
			 	 dx.html("");
			 	 
			 	 $("<option value=''>请选择地区</option>").appendTo(dx);
			 	 
			 	  $.each(data,function(index,aper)
		            {
		            $("<option value='"+aper.aid+"' >" +aper.aname + "</option>").appendTo(dx);
		            });	 	 	 	
					dx.parent().show();
					cy.next().show();			
		  }	else{ 
			    dx.parent().hide();
				cy.next().hide();
			}  	  	  
	  },"json");
	  }
	  //省份为空
	  else{
	  		dx.parent().hide();
			cy.next().hide();	
	  }	   	   
	   });
	   
	   dx.change(function(){
	   	var dqm = $(this).val();
		//2.根据省份 城市 地区 获得 图片的文件名
		var sfm = sf.val();
		var csm = cy.val();		
		var carimgname =sfm+csm+dqm+".jpg";
	    alert( carimgname);
	    carimg.hide();
		$(".carloading").show();
		//4.通过Javascript中的Image对象预装载图片
		var cacheimg = new Image();
		$(cacheimg).attr("src","images/" + carimgname).load(function(){
			//隐藏loading图片
			$(".carloading").hide();
			//显示图片
			carimg.attr("src","images/" + carimgname).show();
		});
	    
	    
	    
	   
				});
	   
	  
	   
	   //给数据装载中的节点定义ajax事件，实现动画提示效果
	$(".loading").ajaxStart(function(){
		$(this).css("visibility","visible");
		$(this).animate({
			opacity: 1
		},0);
	}).ajaxStop(function(){
		$(this).animate({
			opacity: 0
		},500);
	});
	
});

  
	  	  
</script>