jquery实现三级级联的下拉框。
<————HTML部分————–>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title></title>
<script type=”text/javascript” src=”jslib/jquery.js”></script>
<script type=”text/javascript” src=”jslib/select.js”></script>
<link rel=”stylesheet” type=”text/css” href=”mycss/select.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>请选择汽车厂商</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”>
<img src=”images/img-loading.gif” class=”carload”/>
<img src=”" class=”carimg”/>
</div>
</body>
</html>
<—————CSS部分—————–>
.loading{
text-align:center;
visibility:hidden;
}
p,.car,.carimage{
text-align:center;
}
.cartype,.wheeltype,.car img,.carimage,.carload{
display:none;
}
<—————–js部分—————–>
$(function(){
//得到三个下拉框
var carnameSelect = $(“.carname”).children(“select”);
var cartypeSelect = $(“.cartype”).children(“select”);
var wheeltypeSelect = $(“.wheeltype”).children(“select”);
//给三个下拉框加下拉框的改变事件
carnameSelect.change(function(){
//1.获取当前汽车厂商下拉框所有选中的值
var carnameValue = $(this).val();
//把wheeltypeSelect隐藏起来，并且把第二个下拉框并列的图片隐藏
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
//如果值不为空 则向服务器发送请求
if(carnameValue!=”"){
//用post给服务器发送信息
//第一个参数是请求的url 第二个参数是请求发送的数据并且以post发送，第三个参数是回调函数就收返回数据，数据就在函数的参数中
//第四个参数是请求返回的数据格式默认是html
if(!carnameSelect.data(carnameValue)){
$.post(“SelectServlet”,{keyword:carnameValue,type:”top”},function(data){
if(data.length!=0){
cartypeSelect.html(“”);
$(“<option value=”>请选择汽车类型</option>”).appendTo(cartypeSelect);
for(var i=0;i<data.length;i++){
$(“<option value=’”+data[i]+”‘>”+data[i]+”</option>”).appendTo(cartypeSelect);
}
//追加完成后，需要显示第二个下拉框和第一个下拉框后的图片
cartypeSelect.parent().show();
carnameSelect.next().show();
}else{
//如果是0 说明没有数据要返回。
//第二个下拉框隐藏，第一个下拉框后的图片隐藏。
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
//把数据缓冲起来，下次从缓冲中去取，取不到的再跟服务器进行交互，取到就直接使用，以此来减轻服务器的压力
carnameSelect.data(carnameValue,data);
},”json”);
}else{
var data = carnameSelect.data(carnameValue);
if(data.length!=0){
//遍历这个数组元素
cartypeSelect.html(“”);
$(“<option value=”>请选择汽车类型</option>”).appendTo(cartypeSelect);
for(var i=0;i<data.length;i++){
//存在一个元素，汽车类型的下拉框就应该多一个元素 所以又一个元素就创建一个option节点，并且追加给汽车类型下拉框
$(“<option value=’”+data[i]+”‘>”+data[i]+”</option>”).appendTo(cartypeSelect);
}
//追加完成后，需要显示第二个下拉框和第一个下拉框的图片
cartypeSelect.parent().show();
carnameSelect.next().show();
}else{
//如果是0 说明没有数据要返回。
//第二个下拉框隐藏，第一个下拉框后的图片隐藏。
cartypeSelect.parent().hide();
carnameSelect.next().show();
}
}
}else{
//如果carnameValue为空 也就是说选择的汽车厂商没有，那么第二个下拉框，和第一个下拉框后的图片还得继续隐藏
cartypeSelect.parent().hide();
//获取汽车厂商的下一个兄弟节点
carnameSelect.next().hide();
}
});
cartypeSelect.change(function(){
//1.获取当前汽车类型下拉框所有选中的值
var cartypeValue = $(this).val();
//隐藏汽车图片attr：先清空上次src图片路径避免下一次先显示一次.
$(“.carimg”).hide().attr(“src”,”");
$(“.carimage”).hide();
//2.如果值不为空就向服务器发送请求
if(cartypeValue!=”"){
if(!cartypeSelect.data(cartypeValue)){
$.post(“SelectServlet”,{keyword:cartypeValue,type:”sub”},function(data){
//可以获得请求数据进行分析处理 ,将来在Servlet中数据是以字符串数组的方式返回的
//如果返回数据的长度不是0 对数据进行分析
if(data.length!=0){
//遍历此数组元素
wheeltypeSelect.html(“”);
$(“<option value=”>请选择汽车类型</option>”).appendTo(wheeltypeSelect);
for(var i=0;i<data.length;i++){
//存在一个元素，汽车类型的下拉框就应该多一个元素 所以又一个元素就创建一个option节点，并且追加给汽车类型下拉框
$(“<option value=’”+data[i]+”‘>”+data[i]+”</option>”).appendTo(wheeltypeSelect);
}
//追加完成后，需要显示第三个下拉框和第二个下拉框后的图片
wheeltypeSelect.parent().show();
cartypeSelect.next().show();
}else{
//如果是0 说明没有数据要返回。
//第3个下拉框隐藏，第2个下拉框后的图片隐藏。
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
//把data数据缓冲起来
cartypeSelect.data(cartypeValue,data);
},”json”);
}else{
var data = cartypeSelect.data(cartypeValue);
if(data.length!=0){
//遍历这个数组元素
wheeltypeSelect.html(“”);
$(“<option value=”>请选择汽车类型</option>”).appendTo(wheeltypeSelect);
for(var i=0;i<data.length;i++){
//存在一个元素，汽车类型的下拉框就应该多一个元素 所以又一个元素就创建一个option节点，并且追加给汽车类型下拉框
$(“<option value=’”+data[i]+”‘>”+data[i]+”</option>”).appendTo(wheeltypeSelect);
}
//追加完成后，需要显示第三个下拉框和第二个下拉框后的图片
wheeltypeSelect.parent().show();
cartypeSelect.next().show();
//追加完成后，需要显示第三个下拉框和第二个下拉框后的图片
wheeltypeSelect.parent().show();
cartypeSelect.next().show();
}else{
//如果是0 说明没有数据要返回。
//第3个下拉框隐藏，第2个下拉框后的图片隐藏。
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
}
}else{
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
});
wheeltypeSelect.change(function(){
//取得选中的车轮类型的值
var wheeltypeValue = $(this).val();
//取得图片的名称
var imagename = carnameSelect.val()+”_”+cartypeSelect.val()+”_”+wheeltypeValue+”.jpg”;
//$(“.carimg”).attr(“src”,”images/”+imagename);
//$(“.carimage”).show();
//js对图片进行预装载
//js对象
$(“.carimg”).hide();
$(“.carimage”).show();
$(“.carload”).show();
var catchimg = new Image();
//如何转换为jquery对象并处理
$(catchimg).attr(“src”,”images/”+imagename).load(function(){
//隐藏loading图片
$(“.carload”).hide();
//显示汽车图片
$(“.carimage”).show();
$(“.carimg”).attr(“src”,”images/”+imagename).show();
});
});
//动画效果
$(“.loading”).ajaxStart(function(){
$(“.loading”).css(“visibility”,”visible”);
$(this).animate({
opacity:1
},0);
}).ajaxStop(function(){
$(this).animate({
opacity:0
},500);
});
});
//别忘了引用jquery.js