本文实例讲述了jQuery+jsp下拉框联动获取本地数据的方法。分享给大家供大家参考，具体如下：
JQuery下拉框联动很好的体现了Ajax的按需取数据的要求，减小数据的交互量。(点击此处下载源代码)
下面的实例使用Json将服务器端的类或者对象转换为JSON格式，主要运用了6个jar包
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-lang-2.3.jar
commons-logging-1.0.4.jar
ezmorph-1.0.3.jar
json-lib-2.1.jar
下面贴上实验图，并详细讲解一下主要代码
显示页面index.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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery实例-级联下拉框效果</title>
<meta http-equiv= "Content-Type" content="text/html";charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/chainselect.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/chainselect.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="images/BMW_316ti_rha.jpg" alt="汽车图片" class="carimg"/></p>
</div>
</body>
</html>修饰文件chainselect.css
.loading {
width: 400px;
/*margin-left: auto;*/
/*margin-right: auto;*/
