用JQuery和select來實現汽車廠商和汽車類型的聯動，參考過程如下
效果圖：
邏輯分析圖：
html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>級聯下拉框效果</title> <link rel="stylesheet" type="text/css" href="css/chainselect.css"> <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/chainselect.js"></script> </head> <body> <div class="car"> <span class="carname"> 汽車廠商： <select> <option value="">請選擇汽車廠商</option> <option value="BMW">寶馬</option> <option value="Audi">奧迪</option> <option value="VW">大眾</option> </select> <img src="images/pfeil.gif" alt="有數據"/> </span> <span class="cartype"> 汽車類型： <select></select> </span> </div> </body> </html>
css代碼：
.car { text-align:center; } .cartype{ display:none; } js代碼：
$(document).ready(function(){ //找到下拉框 var carnameSelect = $(".carname").children("select"); var cartypeSelect = $(".cartype").children("select"); //給下拉框注冊事件 carnameSelect.change(function(){ var carnameValue = $(this).val(); if( carnameValue != ""){ //carnameValue不為空的情況接著判斷 if(!carnameSelect.data(carnameValue)){ //不在緩沖區中,需要向服務器請求 $.post("ChainSelect",{keyword:carnameValue,type:"top"},function(data){ if (data.length != 0){ //返回的數據不為空 cartypeSelect.html(""); $("<option value=''>請選擇汽車類型</option>").appendTo(cartypeSelect); for(var i = 0;i < data.length; i++ ){ $("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(cartypeSelect); } cartypeSelect.parent().show(); carnameSelect.next().show(); }else{ //返回的數據為空 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } carnameSelect.data(carnameValue,data); },"json"); }else{ //在緩沖區中 var data = carnameSelect.data(carnameValue); if (data.length != 0){ //返回的數據不為空 cartypeSelect.html(""); $("<option value=''>請選擇汽車類型</option>").appendTo(cartypeSelect); for(var i = 0;i < data.length; i++ ){ $("<option value =' " + data[i] + " '> "+ data[i] +"</option>").appendTo(cartypeSelect); } cartypeSelect.parent().show(); carnameSelect.next().show(); }else{ //返回的數據為空 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } } }else{ //carnameValue為空的情況，隱藏第二個下拉框 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } }); }); 如果大家還想深入學習，可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學習。
以上就是利用JQuery和select實現級聯下拉框的小例子，希望對大家的學習有所幫助。
新聞熱點
疑難解答
