JQuery应用五：级联下拉框(JQuery与JSON)

于 2011-09-19 23:44:16 发布
阅读量594 收藏
点赞数
文章标签： jquery json function class html stylesheet
 

页面如下：

Html代码   
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.   <head>  
  4.        
  5.     <title>JQuery_Study_Select</title>  
  6.     <link rel="stylesheet" type="text/css" href="css/select.css">  
  7.     <script language="javascript" src="js/jquery-1.4.2.js"></script>  
  8.     <script language="javascript" src="js/select.js"></script>  
  9.   </head>  
  10.        
  11.   <body>  
  12.         <div class="loading">  
  13.             <p><img src="images/data-loading.gif" alt="数据装载中" /></p>  
  14.             <p>数据装载中......</p>  
  15.         </div>  
  16.         <div class="car">  
  17.             <span class="carname">  
  18.                 汽车厂商:   
  19.                 <select>  
  20.                     <option value="" selected="selected">请选择汽车厂商</option>  
  21.                     <option value="BMW">宝马</option>  
  22.                     <option value="Audi">奥迪</option>  
  23.                     <option value="VW">大众</option>  
  24.                 </select>  
  25.                 <img src="images/pfeil.gif" alt="有数据" />  
  26.             </span>  
  27.             <span class="cartype">  
  28.                 汽车类型:   
  29.                 <select></select>  
  30.                 <img src="images/pfeil.gif" alt="有数据" />  
  31.             </span>  
  32.             <span class="wheeltype">  
  33.                 车轮类型：   
  34.                 <select></select>  
  35.             </span>  
  36.         </div>  
  37.         <div class="carimage">  
  38.             <p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p>  
  39.             <p><img src="" alt="汽车图片" class="carimg"/></p>  
  40.         </div>  
  41.     </body>  
  42. </html>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>JQuery_Study_Select</title>
	<link rel="stylesheet" type="text/css" href="css/select.css">
	<script language="javascript" src="js/jquery-1.4.2.js"></script>
	<script language="javascript" src="js/select.js"></script>
  </head>
  	
  <body>
		<div class="loading">
			<p><img src="images/data-loading.gif" alt="数据装载中" /></p>
			<p>数据装载中......</p>
		</div>
		<div class="car">
			<span class="carname">
				汽车厂商:
				<select>
					<option value="" selected="selected">请选择汽车厂商</option>
					<option value="BMW">宝马</option>
					<option value="Audi">奥迪</option>
					<option value="VW">大众</option>
				</select>
				<img src="images/pfeil.gif" alt="有数据" />
			</span>
			<span class="cartype">
				汽车类型:
				<select></select>
				<img src="images/pfeil.gif" alt="有数据" />
			</span>
			<span class="wheeltype">
				车轮类型：
				<select></select>
			</span>
		</div>
		<div class="carimage">
			<p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p>
			<p><img src="" alt="汽车图片" class="carimg"/></p>
		</div>
	</body>
</html>

 css样式如下：

Html代码   
  1. .loading {   
  2.     width: 400px;   
  3.     /*margin-left: auto;*/   
  4.     /*margin-right: auto;*/   
  5.     margin: 0 auto;   
  6.     visibility: hidden;    
  7. }   
  8. .loading p {   
  9.     text-align: center;   
  10. }   
  11. p {   
  12.     margin: 0;   
  13. }   
  14. .car {   
  15.     /*width: 500px;*/   
  16.     /*margin: 0 auto;*/   
  17.     text-align: center;   
  18. }   
  19. .carimage {   
  20.     text-align: center;   
  21. }   
  22. .cartype, .wheeltype, .carloading, .carimg, .car img {   
  23.     display: none;   
  24. }  
.loading {
	width: 400px;
	/*margin-left: auto;*/
	/*margin-right: auto;*/
	margin: 0 auto;
	visibility: hidden; 
}
.loading p {
	text-align: center;
}
p {
	margin: 0;
}
.car {
	/*width: 500px;*/
	/*margin: 0 auto;*/
	text-align: center;
}
.carimage {
	text-align: center;
}
.cartype, .wheeltype, .carloading, .carimg, .car img {
	display: none;
}

 js内容如下：

 

Html代码   
  1. $(document).ready(function(){   
  2.     //找到三个下接框   
  3.     var carnameSelect = $(".carname").children("select");   
  4.     var cartypeSelect = $(".cartype").children("select");   
  5.     var wheeltypeSelect = $(".wheeltype").children("select");   
  6.     var carimg = $(".carimg");   
  7.        
  8.     carnameSelect.change(function(){   
  9.         //val()方法：获得（设置）第一个匹配元素的当前值。   
  10.         var carnameValue = $(this).val();   
  11.         wheeltypeSelect.parent().hide();   
  12.         //attr(key,value)方法：为所有匹配的元素设置一个属性值。   
  13.         carimg.hide().attr("src","");   
  14.         if(carnameValue!=""){   
  15.             if(carnameSelect.data(carnameValue)) {//从缓存中取数据   
  16.                 var data = carnameSelect.data(carnameValue);   
  17.                 //html(val)：设置每一个匹配元素的html内容   
  18.                 cartypeSelect.html("");   
  19.                 if(data.length!=0){   
  20.                     $("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);   
  21.                     for(var i=0;i<data.length;i++){   
  22.                         $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);   
  23.                     }   
  24.                     carnameSelect.next().show();   
  25.                     cartypeSelect.parent().show();   
  26.                 }else{   
  27.                     carnameSelect.next().hide();   
  28.                     cartypeSelect.parent().hide();   
  29.                     wheeltypeSelect.parent().hide();   
  30.                 }   
  31.             }else {   
  32.                 //Ajax的post请求：   
  33.                 $.post("CarJsonServlet",{keyword:carnameValue,type:"top"},function(data){   
  34.                     cartypeSelect.html("");   
  35.                     if(data.length!=0){   
  36.                         $("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);   
  37.                         for(var i=0;i<data.length;i++){   
  38.                             $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);   
  39.                         }   
  40.                         carnameSelect.next().show();   
  41.                         cartypeSelect.parent().show();   
  42.                     }else{   
  43.                         carnameSelect.next().hide();   
  44.                         cartypeSelect.parent().hide();   
  45.                         wheeltypeSelect.parent().hide();   
  46.                     }   
  47.                     carnameSelect.data(carnameValue,data);   
  48.                 },"json");   
  49.             }   
  50.         }else{   
  51.             carnameSelect.next().hide();   
  52.             cartypeSelect.parent().hide();   
  53.             wheeltypeSelect.parent().hide();   
  54.         }   
  55.     });   
  56.        
  57.     cartypeSelect.change(function(){   
  58.         carimg.hide().attr("src","");   
  59.         var cartypeValue = $(this).val();   
  60.         if(cartypeValue !=""){   
  61.             if(cartypeSelect.data(cartypeValue)) {   
  62.                 var data = cartypeSelect.data(cartypeValue);   
  63.                 wheeltypeSelect.html("");   
  64.                 if(data.length!=0){   
  65.                     $("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);   
  66.                     for(var i=0;i<data.length;i++){   
  67.                         $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);   
  68.                     }   
  69.                     cartypeSelect.next().show();   
  70.                     wheeltypeSelect.parent().show();   
  71.                 }else{   
  72.                     cartypeSelect.next().hide();   
  73.                     wheeltypeSelect.parent().hide();   
  74.                 }   
  75.             }else {   
  76.                 $.post("CarJsonServlet",{keyword:cartypeValue,type:"sub"},function(data){   
  77.                     wheeltypeSelect.html("");   
  78.                     if(data.length!=0){   
  79.                         $("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);   
  80.                         for(var i=0;i<data.length;i++){   
  81.                             $("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);   
  82.                         }   
  83.                         cartypeSelect.next().show();   
  84.                         wheeltypeSelect.parent().show();   
  85.                     }else{   
  86.                         cartypeSelect.next().hide();   
  87.                         wheeltypeSelect.parent().hide();   
  88.                     }   
  89.                     cartypeSelect.data(cartypeValue,data);   
  90.                 },"json");   
  91.             }   
  92.         }else{   
  93.             cartypeSelect.next().hide();   
  94.             wheeltypeSelect.parent().hide();   
  95.         }   
  96.     });   
  97.        
  98.     wheeltypeSelect.change(function(){   
  99.         var wheeltypeName = $(this).val();   
  100.         var cartypeName = cartypeSelect.val();   
  101.         var carnameName = carnameSelect.val();   
  102.         var carimgName = carnameName+"_"+cartypeName+"_"+wheeltypeName+".jpg";   
  103.         carimg.hide();//原来的图片隐藏   
  104.            
  105.         $(".carloading").show();   
  106.         var cachimage = new Image();   
  107.         $(cachimage).attr("src","images/"+carimgName);//预装载，预装载时显示load图片   
  108.         //carimg.attr("src","images/"+carimgName).show();   
  109.         $(cachimage).load(function(){//装载完之后执行的操作，页面会缓存图片   
  110.             $(".carloading").hide();   
  111.             carimg.attr("src","images/"+carimgName).show();//由于页面会缓存图片显示会很快   
  112.         });   
  113.     });   
  114.        
  115.     $(".loading").ajaxStart(function(){   
  116.         $(".loading").css("visibility","visible");   
  117.         $(".loading").animate({   
  118.             opacity: 1   
  119.         },0);   
  120.     }).ajaxStop(function(){   
  121.         //$(".loading").css("visibility","hidden");   
  122.         //$(".loading").fadeOut(500);   
  123.         $(".loading").animate({   
  124.             opacity: 0   
  125.         },500);   
  126.     });   
  127.        
  128. });  
$(document).ready(function(){
	//找到三个下接框
	var carnameSelect = $(".carname").children("select");
	var cartypeSelect = $(".cartype").children("select");
	var wheeltypeSelect = $(".wheeltype").children("select");
	var carimg = $(".carimg");
	
	carnameSelect.change(function(){
		//val()方法：获得（设置）第一个匹配元素的当前值。
		var carnameValue = $(this).val();
		wheeltypeSelect.parent().hide();
		//attr(key,value)方法：为所有匹配的元素设置一个属性值。
		carimg.hide().attr("src","");
		if(carnameValue!=""){
			if(carnameSelect.data(carnameValue)) {//从缓存中取数据
				var data = carnameSelect.data(carnameValue);
				//html(val)：设置每一个匹配元素的html内容
				cartypeSelect.html("");
				if(data.length!=0){
					$("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);
					for(var i=0;i<data.length;i++){
						$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);
					}
					carnameSelect.next().show();
					cartypeSelect.parent().show();
				}else{
					carnameSelect.next().hide();
					cartypeSelect.parent().hide();
					wheeltypeSelect.parent().hide();
				}
			}else {
				//Ajax的post请求：
				$.post("CarJsonServlet",{keyword:carnameValue,type:"top"},function(data){
					cartypeSelect.html("");
					if(data.length!=0){
						$("<option value='' selected='selected'>"+'请选择汽车类型'+"</option>").appendTo(cartypeSelect);
						for(var i=0;i<data.length;i++){
							$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(cartypeSelect);
						}
						carnameSelect.next().show();
						cartypeSelect.parent().show();
					}else{
						carnameSelect.next().hide();
						cartypeSelect.parent().hide();
						wheeltypeSelect.parent().hide();
					}
					carnameSelect.data(carnameValue,data);
				},"json");
			}
		}else{
			carnameSelect.next().hide();
			cartypeSelect.parent().hide();
			wheeltypeSelect.parent().hide();
		}
	});
	
	cartypeSelect.change(function(){
		carimg.hide().attr("src","");
		var cartypeValue = $(this).val();
		if(cartypeValue !=""){
			if(cartypeSelect.data(cartypeValue)) {
				var data = cartypeSelect.data(cartypeValue);
				wheeltypeSelect.html("");
				if(data.length!=0){
					$("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);
					for(var i=0;i<data.length;i++){
						$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);
					}
					cartypeSelect.next().show();
					wheeltypeSelect.parent().show();
				}else{
					cartypeSelect.next().hide();
					wheeltypeSelect.parent().hide();
				}
			}else {
				$.post("CarJsonServlet",{keyword:cartypeValue,type:"sub"},function(data){
					wheeltypeSelect.html("");
					if(data.length!=0){
						$("<option value='' selected='selected'>"+'请选择车轮类型'+"</option>").appendTo(wheeltypeSelect);
						for(var i=0;i<data.length;i++){
							$("<option value='"+data[i]+">"+data[i]+"</option>").appendTo(wheeltypeSelect);
						}
						cartypeSelect.next().show();
						wheeltypeSelect.parent().show();
					}else{
						cartypeSelect.next().hide();
						wheeltypeSelect.parent().hide();
					}
					cartypeSelect.data(cartypeValue,data);
				},"json");
			}
		}else{
			cartypeSelect.next().hide();
			wheeltypeSelect.parent().hide();
		}
	});
	
	wheeltypeSelect.change(function(){
		var wheeltypeName = $(this).val();
		var cartypeName = cartypeSelect.val();
		var carnameName = carnameSelect.val();
		var carimgName = carnameName+"_"+cartypeName+"_"+wheeltypeName+".jpg";
		carimg.hide();//原来的图片隐藏
		
		$(".carloading").show();
		var cachimage = new Image();
		$(cachimage).attr("src","images/"+carimgName);//预装载，预装载时显示load图片
		//carimg.attr("src","images/"+carimgName).show();
		$(cachimage).load(function(){//装载完之后执行的操作，页面会缓存图片
			$(".carloading").hide();
			carimg.attr("src","images/"+carimgName).show();//由于页面会缓存图片显示会很快
		});
	});
	
	$(".loading").ajaxStart(function(){
		$(".loading").css("visibility","visible");
		$(".loading").animate({
			opacity: 1
		},0);
	}).ajaxStop(function(){
		//$(".loading").css("visibility","hidden");
		//$(".loading").fadeOut(500);
		$(".loading").animate({
			opacity: 0
		},500);
	});
	
});

 servlet内空如下：

Java代码   
  1. public class CarJsonServlet extends HttpServlet {   
  2.   
  3.     /**  
  4.      *   
  5.      */  
  6.     private static final long serialVersionUID = 7438884867809030432L;   
  7.   
  8.     public void doGet(HttpServletRequest request, HttpServletResponse response)   
  9.             throws ServletException, IOException {   
  10.         this.doPost(request, response);   
  11.     }   
  12.   
  13.     public void doPost(HttpServletRequest request, HttpServletResponse response)   
  14.             throws ServletException, IOException {   
  15.         response.setContentType("text/html;charset=UTF-8");   
  16.         response.setHeader("Cache-Control", "no-cache");   
  17.   
  18.         String type = request.getParameter("type");   
  19.         String keyword = request.getParameter("keyword");   
  20.         StringBuffer jsonresult = new StringBuffer();   
  21.         JSONArray jsonArrayResult = new JSONArray();   
  22.         jsonresult.append("[");   
  23.         if ("top".equals(type)) {   
  24.             if ("BMW".equals(keyword)) {   
  25.             //  jsonresult.append("\"316ti\"");   
  26.             //  jsonresult.append(",\"6ercupe\"");   
  27.                 jsonArrayResult.add("316ti");   
  28.                 jsonArrayResult.add("6ercupe");   
  29.             } else if ("Audi".equals(keyword)) {   
  30.             //  jsonresult.append("\"tt\"");   
  31.                 jsonArrayResult.add("tt");   
  32.             } else if ("VW".equals(keyword)) {   
  33.             //  jsonresult.append("\"Golf\"");   
  34.                 jsonArrayResult.add("Golf4");   
  35.             }   
  36.         } else if ("sub".equals(type)) {   
  37.             if ("tt".equals(keyword)) {   
  38.                 jsonArrayResult.add("rha");   
  39.                 jsonArrayResult.add("rhb");   
  40.                 jsonArrayResult.add("rhc");   
  41.             } else if ("316ti".equals(keyword)) {   
  42.                 jsonArrayResult.add("rha");   
  43.                 jsonArrayResult.add("rhb");   
  44.             } else if ("6ercupe".equals(keyword)) {   
  45.                 jsonArrayResult.add("rha");   
  46.                 jsonArrayResult.add("rhb");   
  47.                 jsonArrayResult.add("rhc");   
  48.             } else if("Golf4".equals(keyword)){   
  49.                 jsonArrayResult.add("rha");   
  50.                 jsonArrayResult.add("rhb");   
  51.             }   
  52.         }   
  53.         //jsonresult.append("]");   
  54.         PrintWriter out = response.getWriter();   
  55.         out.write(jsonArrayResult.toString());   
  56.         out.flush();   
  57.         out.close();   
  58.     }   
  59.   
  60. }  
public class CarJsonServlet extends HttpServlet {

	/**
	 * 
	 */
	private static final long serialVersionUID = 7438884867809030432L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/html;charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");

		String type = request.getParameter("type");
		String keyword = request.getParameter("keyword");
		StringBuffer jsonresult = new StringBuffer();
		JSONArray jsonArrayResult = new JSONArray();
		jsonresult.append("[");
		if ("top".equals(type)) {
			if ("BMW".equals(keyword)) {
			//	jsonresult.append("\"316ti\"");
			//	jsonresult.append(",\"6ercupe\"");
				jsonArrayResult.add("316ti");
				jsonArrayResult.add("6ercupe");
			} else if ("Audi".equals(keyword)) {
			//	jsonresult.append("\"tt\"");
				jsonArrayResult.add("tt");
			} else if ("VW".equals(keyword)) {
			//	jsonresult.append("\"Golf\"");
				jsonArrayResult.add("Golf4");
			}
		} else if ("sub".equals(type)) {
			if ("tt".equals(keyword)) {
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
				jsonArrayResult.add("rhc");
			} else if ("316ti".equals(keyword)) {
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
			} else if ("6ercupe".equals(keyword)) {
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
				jsonArrayResult.add("rhc");
			} else if("Golf4".equals(keyword)){
				jsonArrayResult.add("rha");
				jsonArrayResult.add("rhb");
			}
		}
		//jsonresult.append("]");
		PrintWriter out = response.getWriter();
		out.write(jsonArrayResult.toString());
		out.flush();
		out.close();
	}

}

 

web.xml中的servlet配置如下：

Xml代码   
  1. <servlet>  
  2.     <servlet-name>CarJsonServlet</servlet-name>  
  3.     <servlet-class>com.mengya.servlet.CarJsonServlet</servlet-class>  
  4.   </servlet>  
  5.   
  6.   <servlet-mapping>  
  7.     <servlet-name>CarJsonServlet</servlet-name>  
  8.     <url-pattern>/CarJsonServlet</url-pattern>  
  9.   </servlet-mapping>  
ilovel7
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值