Jquery实现三级联动效果(源码)

Jquery实现三级联动效果

一、jsp代码
<div class="loding">
<p><img alt="内容加载中......" src="images/4.jpg"></p>
</div>
<div class="car">
<span class="carName">
汽车厂商：
<select>
<option value="" selected="selected">--请选择汽车厂商--</option>
<option value="Bmw">宝马</option>
<option value="Audi">奥迪</option>
<option value="Bzen">奔驰</option>
</select>
<img alt="图片" src="images/5.jpg">
</span>
<span class="cartype">
汽车类型：
<select>
<option value="" selected="selected">--请选择汽车类型--</option>
</select>
<img alt="图片" src="images/5.jpg">
</span>
<span class="carlunTai">
轮胎类型：
<select>
<option value="" selected="selected">--请选择轮胎类型--</option>
</select>
</span>
</div>
<div class="moren"></div>
<div class="carimg">
<img alt="汽车图片" src="images/car.jpg">
</div>
二、css源码
.loding{
width: 500px;
margin-left: auto;
margin-right: auto;
visibility: hidden;
}
.loding p{
text-align: center;
}
.car{
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.carimg{
width: 600px;
margin-left: auto;
margin-right: auto;
}
.cartype,.carlunTai,.carimg,.car img{
display: none;
}
.moren{
height: 50px;
}
三、js源码：
$(document).ready(function(){
//先找到三个下拉框
var carNameSelect = $(".carName").children("select");
var carTypeSelect = $(".cartype").children("select");
var carlunTaiSelect = $(".carlunTai").children("select");

//给三个下拉框添加事件
carNameSelect.change(function(){
//如果点击第一个下拉框首先要把第三个隐藏
carlunTaiSelect.parent().hide();
//alert(5444);
//1,先获取当前下拉框的值
var carNameValue = $(this).val();
alert(typeof carNameValue);
//alert(carNameValue);
//2，判断 如果值不为空，则将下拉框的值传递给服务器
if(carNameValue != ""){
$.post("carVendorAcrion",{
carName:carNameValue
},
function(data){
alert(data);
//2.1接收服务器返回的汽车类型  join类型  返回的是一个js的数组对象
if(data.length != 0){
//每次点击时要把汽车类型下拉框的内容先清空
carTypeSelect.html("");
//添加一个默认的选项放到汽车类型的下拉框里面
$("<option value=''>--请选择汽车类型--</option>").appendTo(carTypeSelect);
//2.2解析汽车类型数据，    填充到汽车类型的下拉框
for(var i=0; i<data.length;i++){
//创建一个option 并填充到汽车类型的下拉框
$("<option value="+data[i]+">"+data[i]+"</option>").appendTo(carTypeSelect);
}
//需要显示第二个下拉框
carTypeSelect.parent().show();
//把第一歌下拉框后面的img图片显示出来
carNameSelect.next().show();
}else{
//2.2 没有任何汽车类型  把汽车类型下拉框隐藏
carTypeSelect.parent().hide();
}
},"json");
}else{
//3 r如果值为空 则将汽车类型的下拉框隐藏  同时也要把第一个下拉框后面的图片隐藏
//找到第汽车类型的下拉框的父节点span并
carTypeSelect.parent().hide();
//找到第一歌下拉框的子节点img  并隐藏
carNameSelect.next().hide();
}
});

carTypeSelect.change(function(){
//alert(5444);
//1,先获取当前下拉框的值
var carTypeValue = $(this).val();
//alert(typeof carTypeValue);
//alert(carNameValue);
//2，判断 如果值不为空，则将下拉框的值传递给服务器
if(carTypeValue != ""){
$.post("carVendorAcrion",{
carName:carTypeValue
},
function(data){
alert(data);
//2.1接收服务器返回的车轮车型  join类型  返回的是一个js的数组对象
if(data.length != 0){
//每次点击时要把车轮类型下拉框的内容先清空
carlunTaiSelect.html("");
//添加一个默认的选项放到汽车类型的下拉框里面
$("<option value=''>--请选择车轮类型--</option>").appendTo(carlunTaiSelect);
//2.2解析车轮类型数据，    填充到车轮类型的下拉框
for(var i=0; i<data.length;i++){
//创建一个option 并填充到汽车类型的下拉框
$("<option value="+data[i]+">"+data[i]+"</option>").appendTo(carlunTaiSelect);
}
//需要显示第三个下拉框
carlunTaiSelect.parent().show();
//把第二歌下拉框后面的img图片显示出来
carlunTaiSelect.next().show();
}else{
//2.2 没有任何车轮类型  把车轮类型下拉框隐藏
carlunTaiSelect.parent().hide();
}
},"json");
}else{
//3 r如果值为空 则将车轮类型的下拉框隐藏  同时也要把第一个下拉框后面的图片隐藏
//找到第车轮类型的下拉框的父节点span并
carlunTaiSelect.parent().hide();
//找到第二歌下拉框的子节点img  并隐藏
carTypeSelect.next().hide();
}
});
carlunTaiSelect.change(function(){

});
});