$(document).ready(function(){//找到三个下拉框varcarnameSelect=$(".carname").children("select");varcartypeSelect=$(".cartype").children("select");varwheeltypeSelect=$(".wheeltype").children("select");varcarimg=$(".carimg");//给三个下拉框注册事件carnameSelect.change(function(){//1.需要获得当前下拉框的值varcarnameValue=$(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){//2.1接收服务器返回的汽车类型if(data.length!=0){//2.2解析汽车类型的数据，填充到汽车类型的下拉框中cartypeSelect.html("");$("<optionvalue=''>请选择汽车类型</option>").appendTo(cartypeSelect);for(vari=0;i<data.length;i++){$("<optionvalue='"+data[i]+"'>"+data[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);},"json");}else{vardata=carnameSelect.data(carnameValue);//2.1接收服务器返回的汽车类型if(data.length!=0){//2.2解析汽车类型的数据，填充到汽车类型的下拉框中cartypeSelect.html("");$("<optionvalue=''>请选择汽车类型</option>").appendTo(cartypeSelect);for(vari=0;i<data.length;i++){$("<optionvalue='"+data[i]+"'>"+data[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.需要获得当前下拉框的值varcartypeValue=$(this).val();//1.1将汽车图片隐藏起来carimg.hide().attr("src","");//2.如果值不为空，则将下拉框的值传送给服务器if(cartypeValue!=""){if(!cartypeSelect.data(cartypeValue)){$.post("ChainSelect",{keyword:cartypeValue,type:"sub"},function(data){//2.1接收服务器返回的汽车类型if(data.length!=0){//2.2解析汽车类型的数据，填充到车轮类型的下拉框中wheeltypeSelect.html("");$("<optionvalue=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);for(vari=0;i<data.length;i++){$("<optionvalue='"+data[i]+"'>"+data[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);},"json");}else{vardata=cartypeSelect.data(cartypeValue);//2.1接收服务器返回的汽车类型if(data.length!=0){//2.2解析汽车类型的数据，填充到车轮类型的下拉框中wheeltypeSelect.html("");$("<optionvalue=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);for(vari=0;i<data.length;i++){$("<optionvalue='"+data[i]+"'>"+data[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.获取车轮类型varwheeltypeValue=$(this).val();//2.根据汽车厂商名称，汽车型号和车轮类型得到汽车图片的文件名varcarnameValue=carnameSelect.val();varcartypeValue=cartypeSelect.val();varcarimgname=carnameValue+"_"+cartypeValue+"_"+wheeltypeValue+".jpg";//3.显示出loading的图片carimg.hide();$(".carloading").show();//4.通过Javascript中的Image对象预装载图片varcacheimg=newImage();$(cacheimg).attr("src","p_w_picpaths/"+carimgname).load(function(){//隐藏loading图片$(".carloading").hide();//显示汽车图片carimg.attr("src","p_w_picpaths/"+carimgname).show();});//3.修改汽车图片节点的src的值，让汽车图片显示出来//carimg.attr("src","p_w_picpaths/"+carimgname).show();//4.使汽车图片的节点显示出来});//给数据装载中的节点定义ajax事件，实现动画提示效果$(".loading").ajaxStart(function(){$(this).css("visibility","visible");$(this).animate({opacity:1},0);}).ajaxStop(function(){$(this).animate({opacity:0},500);});})
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><title>JQuery实例-级联下拉框效果</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><linktype="text/css"rel="stylesheet"href="css/chainselect.css"/><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/chainselect.js"></script></head><body><divclass="loading"><p><imgsrc="p_w_picpaths/data-loading.gif"alt="数据装载中"/></p><p>数据装载中......</p></div><divclass="car"><spanclass="carname">汽车厂商:<select><optionvalue=""selected="selected">请选择汽车厂商</option><optionvalue="BMW">宝马</option><optionvalue="Audi">奥迪</option><optionvalue="VW">大众</option></select><imgsrc="p_w_picpaths/pfeil.gif"alt="有数据"/></span><spanclass="cartype">汽车类型:<select></select><imgsrc="p_w_picpaths/pfeil.gif"alt="有数据"/></span><spanclass="wheeltype">车轮类型：<select></select></span></div><divclass="carp_w_picpath"><p><imgsrc="p_w_picpaths/img-loading.gif"alt="图片装载中"class="carloading"/></p><p><imgsrc=""alt="汽车图片"class="carimg"/></p></div></body></html>
