基于jQuery的级联上拉效果 _Web前端

基于jQuery的级联下拉效果

先看效果

?JSP代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>jQuery实例-级联下拉框效果</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
	<script type="text/javascript" src="js/chainselect.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/chainselect.css">

  </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>

?JS代码

$(document).ready(function(){
	document.charset="UTF-8"
	//找到三个下拉框
	var carnameSelect = $(".carname").children("select");
	var cartypeSelect = $(".cartype").children("select");
	var wheeltypeSelect = $(".wheeltype").children("select");
	var carimg = $(".carimg");
	//给三个下拉框注册事件
	carnameSelect.change(function(){
		//1.需要获得当前下拉框的值
		var carnameValue = $(this).val();
		//1.1只要第一个下拉框内容有变化，第三个下拉框都要先隐藏起来
		wheeltypeSelect.parent().hide();
		//1.2将汽车图片隐藏起来
		carimg.hide().attr("src","");
		//2.如果值不为空，则将下拉框的值传送给服务器
		if (carnameValue != "") {
			if (!carnameSelect.data(carnameValue)) {
				$.post("ChainSelect",{keyword: carnameValue, type: "top"},function(data){
					//接收服务器的数据，并将它转换成一个字符串数组，注意以","分开
					var datalist = data.split("#");
					//2.1接收服务器返回的汽车类型
					if (datalist.length != 0) {
						//2.2解析汽车类型的数据，填充到汽车类型的下拉框中
						cartypeSelect.html("");
						$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
						for (var i = 0; i < datalist.length; i++) {
							$("<option value='" + datalist[i] + "'>" + datalist[i] + "</option>").appendTo(cartypeSelect);
						}
						//2.2.1汽车类型的下拉框显示出
						cartypeSelect.parent().show();
						//2.2.2第一个下拉框后面的指示图片显示出来
						carnameSelect.next().show();
					} else {
						//2.3没有任何汽车类型的数据
						cartypeSelect.parent().hide();
						carnameSelect.next().hide();
					}
					carnameSelect.data(carnameValue, data);
				});
			} else {
				var data = carnameSelect.data(carnameValue);
				//2.1接收服务器返回的汽车类型
				//接收服务器的数据，并将它转换成一个字符串数组，注意以","分开
				var datalist = data.split("#");
				if (datalist.length != 0) {
					//2.2解析汽车类型的数据，填充到汽车类型的下拉框中
					cartypeSelect.html("");
					$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
					for (var i = 0; i < datalist.length; i++) {
						$("<option value='" + datalist[i] + "'>" + datalist[i] + "</option>").appendTo(cartypeSelect);
					}
					//2.2.1汽车类型的下拉框显示出
					cartypeSelect.parent().show();
					//2.2.2第一个下拉框后面的指示图片显示出来
					carnameSelect.next().show();
				} else {
					//2.3没有任何汽车类型的数据
					cartypeSelect.parent().hide();
					carnameSelect.next().hide();
				}
			}
		} else {
			//3.如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏
			cartypeSelect.parent().hide();
			carnameSelect.next().hide();
		}
	});

	cartypeSelect.change(function(){
		//1.需要获得当前下拉框的值
		var cartypeValue = $(this).val();
		//1.1将汽车图片隐藏起来
		carimg.hide().attr("src","");
		//2.如果值不为空，则将下拉框的值传送给服务器
		if (cartypeValue != "") {
			if (!cartypeSelect.data(cartypeValue)) {
				$.post("ChainSelect",{keyword: cartypeValue, type: "sub"},function(data){
					//接收服务器的数据，并将它转换成一个字符串数组，注意以","分开
					var msglist = data.split("#");
					//2.1接收服务器返回的汽车类型
					if (msglist.length != 0) {
						//2.2解析汽车类型的数据，填充到车轮类型的下拉框中
						wheeltypeSelect.html("");
						$("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
						for (var i = 0; i < msglist.length; i++) {
							$("<option value='" + msglist[i] + "'>" + msglist[i] + "</option>").appendTo(wheeltypeSelect);
						}
						//2.2.1车轮类型的下拉框显示出
						wheeltypeSelect.parent().show();
						//2.2.2第二个下拉框后面的指示图片显示出来
						cartypeSelect.next().show();
					} else {
						//2.3没有任何汽车类型的数据		
						wheeltypeSelect.parent().hide();
						cartypeSelect.next().hide();
					}
					cartypeSelect.data(cartypeValue,data);
				});
			} else {
				var data = cartypeSelect.data(cartypeValue);
				//2.1接收服务器返回的汽车类型
				//接收服务器的数据，并将它转换成一个字符串数组，注意以","分开
				var msglist = data.split("#");
				if (msglist.length != 0) {
					//2.2解析汽车类型的数据，填充到车轮类型的下拉框中
					wheeltypeSelect.html("");
					$("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
					for (var i = 0; i < msglist.length; i++) {
						$("<option value='" + msglist[i] + "'>" + msglist[i] + "</option>").appendTo(wheeltypeSelect);
					}
					//2.2.1车轮类型的下拉框显示出
					wheeltypeSelect.parent().show();
					//2.2.2第二个下拉框后面的指示图片显示出来
					cartypeSelect.next().show();
				} else {
					//2.3没有任何汽车类型的数据		
					wheeltypeSelect.parent().hide();
					cartypeSelect.next().hide();
				}
			}
		} else {
			//3.如果值为空，那么第三个下拉框所在span要隐藏起来，第二个下拉框后面的指示图片也要隐藏
			wheeltypeSelect.parent().hide();
			cartypeSelect.next().hide();
		}
	});

	wheeltypeSelect.change(function(){
		//1.获取车轮类型
		var wheeltypeValue = $(this).val();
		//2.根据汽车厂商名称，汽车型号和车轮类型得到汽车图片的文件名
		var carnameValue = carnameSelect.val();
		var cartypeValue = cartypeSelect.val();
		var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg";

		//3.显示出loading的图片
		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();
		});
		//3.修改汽车图片节点的src的值，让汽车图片显示出来
		//carimg.attr("src","images/" + carimgname).show();
		//4.使汽车图片的节点显示出来
	});


	//给数据装载中的节点定义ajax事件，实现动画提示效果
	$(".loading").ajaxStart(function(){
		$(this).css("visibility","visible");
		$(this).animate({
			opacity: 1
		},0);
	}).ajaxStop(function(){
		$(this).animate({
			opacity: 0
		},500);
	});
})

?Servlet代码

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class ChainSelect extends HttpServlet {

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

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		String cartype = request.getParameter("type");
		String carnameValue = request.getParameter("keyword");
//System.out.println(cartype + "  " + carnameValue);
		if(cartype.equals("top")){
			String str = "tt#d#中";
			out.println(str);
		}else if(cartype.equals("sub")){
			String msg = "rha#rhb#话";
			out.println(msg);
		}
		
	}

}

?CSS代码

.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;
}