<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jquery5-级联下拉框</title>
<link type="text/css" rel="stylesheet" href="css/chainselect.css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/chainselect.js"></script>
</head>
<body>
<div class="loading">
<div>
<p><img src="image/loading.gif" alt="数据装载中"/></p>
<p>数据装载中..................</p>
</div>
</div>
<div class="car">
<span class="carname">
汽车厂商:
<select>
<option value="" selected="selected">请选择厂商</option>
<option value="BMW">宝马</option>
<option value="Audi">奥迪</option>
<option value="UW">大众</option>
</select>
<img src="image/closed.gif" alt="有数据"/>
</span>
<span class="cartype">
汽车类型:
<select></select>
<img src="image/closed.gif" alt="有数据"/>
</span>
<span class="wheeltype">
车轮类型:
<select></select>
</span>
</div>
<div class="carimage">
<p><img src="image/loadingyuan.gif" alt="图片装载中" class="carloading"></p>
<p><img src="" alt="汽车图片" class="carimg"></p>
</div>
</body>
</html>
.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, .carimg, .carloading, .car img {
display: none;
}
$(function() { //找到3个下拉框 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只要第一个下拉框的内容有变化,第3个下拉框就要藏起来 wheeltypeSelect.parent().hide(); //1.2将汽车图片隐藏起来 carimg.hide().attr("src", ""); //2.如果值不为空,则将下拉框的值传送给服务器 if (carnameValue != "") { if (cartypeSelect.data(carnameValue)) { $.post("/selecttest/test", {keyword:carnameValue,type:"top"}, function() { //2.1接收服务器返回的汽车类型 if (data.length != 0) { //2.2解析汽车类型的数据,填充到汽车类型的下拉框中 cartypeSelect.html(""); $("<option value=''>请选择汽车类型</option>").appendTo("cartypeSelect"); for (var i = 0; i < data.length; i++) { $("<option value='" + data[i] + "'>" + data[i] + "<option>") .appendTo(cartypeSelect); } //2.2.1汽车类型的下拉框显示出来 cartypeSelect.parent().show(); //2.2.2显示image next找兄弟节点 carnameSelect.next().show(); } else { //2.3m没有任何汽车类型的数据 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } //缓存 carnameSelect.data(carnameValue, data); }, "json"); } else { var data = cartypeSelect.data(carnameValue); //2.1接收服务器返回的汽车类型 if (data.length != 0) { //2.2解析汽车类型的数据,填充到汽车类型的下拉框中 cartypeSelect.html(""); $("<option value=''>请选择汽车类型</option>").appendTo("cartypeSelect"); for (var i = 0; i < data.length; i++) { $("<option value='" + data[i] + "'>" + data[i] + "<option>") .appendTo(cartypeSelect); } //2.2.1汽车类型的下拉框显示出来 cartypeSelect.parent().show(); //2.2.2显示image next找兄弟节点 carnameSelect.next().show(); } else { //2.3m没有任何汽车类型的数据 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } } } else { //3.如果值为空,那么第2个下拉框所在的span要隐藏,第一个下拉框后面的指示图片 //也要隐藏 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } }); cartypeSelect.change(function() { //1.需要获得当前下拉框的值 var carntypeValue = $(this).val(); //1,1将汽车图片隐藏起来 carimg.hide().attr("src", ""); //2.如果值不为空,则将下拉框的值传送给服务器 if (carntypeValue != "") { $.post("/selecttest/test", {keyword:carnameValue,type:"sub"}, function() { //2.1接收服务器返回的车轮类型 if (data.length != 0) { //2.2解析汽车类型的数据,填充到车轮类型的下拉框中 wheeltypeSelect.html(""); $("<option value=''>请选择车轮类型</option>").appendTo("wheeltypeSelect"); for (var i = 0; i < data.length; i++) { $("<option value='" + data[i] + "'>" + data[i] + "<option>") .appendTo(cartypeSelect); } //2.2.1车轮类型的下拉框显示出来 wheeltypeSelect.parent().show(); //2.2.2显示image next找兄弟节点 carntypeValue.next().show(); } else { //2.3m没有任何汽车类型的数据 wheeltypeSelect.parent().hide(); carntypeValue.next().hide(); } }, "html"); } else { //3.如果值为空,那么第3个下拉框所在的span要隐藏,第一个下拉框后面的指示图片 //也要隐藏 wheeltypeSelect.parent().hide(); carntypeValue.next().hide(); } }); wheeltypeSelect.change(function() { //1获取车轮类型 var wheeltypeValue = $(this).val(); var carnameValue = carnameSelect.val(); var cartypeValue = cartypeSelect.val(); //2根据汽车厂商名称 var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg"; //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); }); });