carnameSelect.next("img").show();
}
}, "json");
} else {
//3.如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏
$(".cartype").hide();
$(".wheeltype").hide();
$(".carimage").hide();
$(this).next("img").hide();
}
});
cartypeSelect.change(function(){
var cartype = cartypeSelect.val();
if(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();
}
}, "json");
} 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";
console.log("carimgName : " + carimgName);
$(".carimage").show();
$(".carimg").attr("src", "../image/" + carimgName).load(function(){
//隐藏loading图片
$(".carloading").hide("slow");
});
$(".carimage p img").show("slow");
} else {
// alert("内容为空");
// $("img").hide();
$(".carimage").hide();
}
});
//给数据装载中的节点定义ajax事件，实现动画提示效果
$(".loading").ajaxStart(function(){
$(this).css("visibility", "visible");
$(this).animate({
opacity: 1
},0);
}).ajaxStop(function(){
$(this).animate({
opacity: 0
},500);
});
});
jQuery代码的思路是，用class选择器选择出三个下拉框，赋值给变量carnameSelect，cartypeSelect，wheeltypeSelect，默认carnameSelect下拉框是显示的，其他下拉框是隐藏。然后给他们三者注册change()事件，当用户选择下拉框的值的时候执行事件函数体里面的内容。这里我以第一级下拉框为例来讲解处理的过程。如果用户选择了第一级下拉框”汽车厂商”的”宝马”，则执行如下代码：
carnameSelect.change(function(){
var carname = carnameSelect.val();
if(carname != "") {
//汽车厂商不为空发起ajax请求
$.post("../chainSelect", {keyword: carname, type : "top"}, function(data){
