} 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);
});
});
用了data()之后，当用户选择了下拉框，并不是直接奔着服务器请求而去的，而是先判断缓存是否为空，carnameSelect.data(carname)。如果为空，则发起ajax请求，并将返回的结果放进缓存carnameSelect.data(carname, data)。如果不为空，在循环添加option节点之前data从缓存中拿到var data = carnameSelect.data(carname)。同样的，图片的缓存放进我们的Image对象中var cacheimg = new Image(),这行代码往后的第一行和第四行将缓存中的图片取出并显示出来。
代码下载地址：https://github.com/shizongger/JqueryInAction
