到此几乎把级联效果实现了，但是如果在高并发环境下，每次用户切换选项都向服务器发送请求，服务器的压力可能过大。所以这里我们用jQuery的缓存来保存那些已经缓存过的请求。可以使用jQuery的data()方法。
定义和用法
从被选元素中返回附加的数据。
$(selector).data(name)
name 可选。规定要取回的数据的名称。
如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。
向元素附加数据
$(selector).data(name,value)
name 必需。规定要设置的数据的名称。
value 必需。规定要设置的数据的值。
data()的使用案例如程序清单1.9：
<html> <head> <script type="text/javascript" src="https://www.jb51.net/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ $("div").data("greeting", "Hello World"); }); $("#btn2").click(function(){ alert($("div").data("greeting")); }); }); </script> </head> <body> <button>把数据添加到 div 元素</button><br /> <button>获取已添加到 div 元素的数据</button> <div></div> </body> </html>
加上缓存之后的完整jQuery代码如下程序清单。
程序清单2.0：chainSelect.js
/** * 级联下拉框效果 */ $(document).ready(function(){ //找到三个下拉框 var carnameSelect = $(".carname").children("select"); var cartypeSelect = $(".cartype").children("select"); var wheeltypeSelect = $(".wheeltype").children("select"); carnameSelect.change(function(){ var carname = carnameSelect.val(); if(carname != "") { if (!carnameSelect.data(carname)) { //汽车厂商不为空发起ajax请求 $.post("../chainSelect", {keyword: carname, type : "top"}, function(data){ if(data != null && data.length != 0) { //清除上一次change的内容 cartypeSelect.html(""); $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(cartypeSelect); } $(".cartype").show(); carnameSelect.next("img").show(); } //将data放入缓存 carnameSelect.data(carname, data); }, "json"); } else { //从缓存中取出数据 var data = carnameSelect.data(carname); if(data != null && data.length != 0) { //清除上一次change的内容 cartypeSelect.html(""); $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(cartypeSelect); } $(".cartype").show(); carnameSelect.next("img").show(); } } } else { //3.如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏 $(".cartype").hide(); $(".wheeltype").hide(); $(".carimage").hide(); $(this).next("img").hide(); } }); cartypeSelect.change(function(){ var cartype = cartypeSelect.val(); if(cartype != "") { if(!cartypeSelect.data(cartype)) { //汽车类型不为空发起ajax请求 $.post("../chainSelect", {keyword: cartype, type : "sub"}, function(data){ if(data != null && data.length != 0) { //清除上一次change的内容 wheeltypeSelect.html(""); $("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(wheeltypeSelect); } $(".wheeltype").show(); cartypeSelect.next("img").show(); } cartypeSelect.data(cartype, data); }, "json"); } else { var data = cartypeSelect.data(cartype); if(data != null && data.length != 0) { //清除上一次change的内容 wheeltypeSelect.html(""); $("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(wheeltypeSelect); } $(".wheeltype").show(); cartypeSelect.next("img").show(); } } } else { //汽车类型为空 $(".wheeltype").hide(); $(".carimage").hide(); $(this).next("img").hide(); } }); wheeltypeSelect.change(function(){ //选中的车轮类型 var wheeltype = wheeltypeSelect.val(); if(wheeltype != "") { //选中的车辆厂商 var carname = carnameSelect.val(); //选中的车辆类型 var cartype = cartypeSelect.val(); //图片的名称 var carimgName = carname + "_" + cartype + "_" + wheeltype + ".jpg"; $(".carimage").show(); //通过Javascript中的Image对象预装载图片 var cacheimg = new Image(); $(cacheimg).attr("src", "../image/" + carimgName).load(function(){ //隐藏loading图片 $(".carloading").hide("slow"); $(".carimg").attr("src", "../image/" + carimgName); }); $(".carimage p img").show("slow"); } else { $(".carimage").hide(); } }); //给数据装载中的节点定义ajax事件，实现动画提示效果 $(".loading").ajaxStart(function(){ $(this).css("visibility", "visible"); $(this).animate({ opacity: 1 },0); }).ajaxStop(function(){ $(this).animate({ opacity: 0 },500); }); });