還是老規矩，先來看下效果圖：
圖1：
圖2：
圖3：
圖4：
這就省份等常見的級聯下拉選單框的原型；下面來看看程式碼的構成
<html>
<head>
<meta charset="UTF-8">
<title>標題</title>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style>
body{
font-size: 13px;
}
.clsInit{
width: 435px;
height: 35px;
line-height: 35px;
padding-left: 10px;
}
.divTip{
padding-top: 5px;
background-color: #eee;
display: none;
}
.btn{
border: #666 1px solid;
padding: 2px;
width: 65px;
float: right;
margin-top: 6px;
margin-right: 6px;
}
</style>
<script type="text/javascript">
$(function(){
function objInit(obj){
return $(obj).html("<option>選擇請</option>");
}
var arrData = {
廠商1: { 品牌1_1: "型號1_1_1,型號1_1_2", 品牌1_2: "型號1_2_1,型號1_2_2" },
廠商2: { 品牌2_1: "型號2_1_1,型號2_1_2", 品牌2_2: "型號2_2_1,型號2_2_2" },
廠商3: { 品牌3_1: "型號3_1_1,型號3_1_2", 品牌3_2: "型號3_2_1,型號3_2_2" }
};
$.each(arrData,function(pF){//遍歷資料增加廠商項
$("#selF").append("<option>" pF "</option>");
});
$("#selF").change(function(){//廠商列表框選項改變事件
objInit("#selT");
objInit("#selC");
$.each(arrData,function(pF,pS){
if($("#selF option:selected").text()==pF){//如果廠商選中項與資料匹配
$.each(pS,function(pT,pC){//遍歷資料增加品牌項
$("#selT").append("<option>" pT "</option>");
});
$("#selT").change(function(){//品牌列表框選項改變事件
objInit("#selC");
$.each(pS,function(pT,pC){
if($("#selT option:selected").text()==pT){//如果品牌選中項與資料匹配
$.each(pC.split(","),function(){//遍歷資料增加型號項
$("#selC").append("<option>" this "</option>");
});
}
});
});
}
});
});
$("#Button1").click(function() { //註冊按鈕單擊事件
var strValue = "您選擇的廠商:";
strValue = $("#selF option:selected").text();
strValue = " 您選擇的品牌:";
strValue = $("#selT option:selected").text();
strValue = " 您選擇的型號:";
strValue = $("#selC option:selected").text();
$("#divTip")
.show()
.addClass("clsTip")
.html(strValue); //顯示提示資訊並增加樣式
});
})
</script>
</head>
<body>
<div class="clsInit">
廠商：<select id="selF"><option>請選擇</option></select>
品牌：<select id="selT"><option>請選擇</option></select>
型號：<select id="selC"><option>請選擇</option></select>
<input id="Button1" type="button" value="查詢" class="btn" />
</div>
<div class="divTip" id="divTip"></div>
</body>
</html>