今天来完成jQuery实战的级联下拉框效果。效果功能如下：
页面默认只提供汽车厂商，当选择了具体的某品牌汽车，汽车类型下拉框就会动态的显示出来，选择对应的类型，然后出来该汽车类型对应的轮胎类型下拉框显示出来，选中轮胎类型，页面的正中间会显示出汽车的图片。
思路分析如图：
建立我们的html页面，程序清单如下：
代码清单1.1: chainSelect.jsp
<body>
<div class="loading">
<p><img src="../image/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="../image/pfeil.gif" alt="有数据">
</span>
<span class="cartype">
汽车类型:
<select>
<option selected="selected">默认选项</option>
<option>Test1</option>
</select>
<img alt="有数据" src="../image/pfeil.gif">
</span>
<span class="wheeltype">
车轮类型:
<select>
<option selected="selected">默认选项</option>
<option>Test1</option>
</select>
</span>
</div>
<div class="carimage">
<p><img src="../image/img-loading.gif" alt="图片装载中" class="carloading"></p>
<p><img src="" alt="汽车图片" class="carimg"></p>
</div>
</body>body体里面囊括了3个div，第一个div的作用是显示“数据正在装载中…”的图片和文字。第二个div显示级联下拉效果。第三个div显示车辆图片。
css
代码清单1.2:chainSelect.css
.loading {
width: 400px;
margin: 0 auto;
/* visibility: hidden; */
}
.loading p {
text-align: center;
}
p {
margin: 0;
}
.car {
text-align: center;
}
.carimage {
text-align: center;
}
.cartype, .wheeltype, .carloading, .carimg, .car img {
display: none;
}代码清单1.3:chainSelect.js
$(document).ready(function(){
