Jquery實作三級關聯效果(源碼)

[align=center][size=medium][color=red]Jquery實作三級關聯效果[/color][/size][/align]一、[size=small][color=red]jsp代碼[/color][/size]

<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>

二、[size=small][color=red]css源碼[/color][/size]

.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;

}

三、[size=small][color=red]js源碼：[/color][/size]

$(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(){

});

});