text.html頁面源碼：
<!DOCTYPE html>
<html>
<head >
<meta charset="UTF-8">
<title>三級關聯例子</title>
<link href="../css/chosen.css" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.8.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/carinforesolve.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/chosen.jquery.js" charset="utf-8"></script>
<SCRIPT type=text/javascript>
$(document).ready(function () {
var dom = new carInfoResolve("swapCarBrand", "swapCarSeries", "swapCarSpec");
dom.init();
});
</SCRIPT>
</head>
<body>
<select id="swapCarBrand" name="swapCarBrand" class="selectCar" >
</select>
<select id="swapCarSeries" name="swapCarSeries" class="selectCar" >
</select>
<select id="swapCarSpec" name="swapCarSpec" class="selectCar" >
</select>
</body>
</html>
三個xml配置檔案如下：
第一級檔案 carBrand.xml
<?xml version="1.0" encoding="utf-8"?>
<carBrands>
<carBrand ID="1">A 奧迪</carBrand>
<carBrand ID="2">B 寶馬</carBrand>
</carBrands>
第二級檔案 carSeries.xml
<?xml version="1.0" encoding="utf-8"?>
<carSeriess>
<carSeries ID="1" PID="1">奧迪A3</carSeries>
<carSeries ID="2" PID="1">奧迪Q3</carSeries>
<carSeries ID="3" PID="2">寶馬5系</carSeries>
<carSeries ID="4" PID="2">寶馬3系</carSeries>
</carSeriess>
第三級檔案 carSpec.xml
<?xml version="1.0" encoding="utf-8"?>
<carSpecs>
<carSpec ID="1" PID="1">2014款 35TFSI 豪華型</carSpec>
<carSpec ID="2" PID="1">2014款 35TFSI 舒适型</carSpec>
<carSpec ID="3" PID="1">2014款 35TFSI 時尚型</carSpec>
<carSpec ID="4" PID="2">2015款 30 TFSI 标準型</carSpec>
<carSpec ID="5" PID="2">2015款 30 TFSI 進取型</carSpec>
<carSpec ID="6" PID="2">2015款 35 TFSI 技術型</carSpec>
<carSpec ID="7" PID="3">2014款-535Li-豪華型</carSpec>
<carSpec ID="8" PID="3">2014款-520Li-典雅型</carSpec>
<carSpec ID="9" PID="3">2014款-525Li-領先型</carSpec>
<carSpec ID="10" PID="4">2014款-320Li-手動型</carSpec>
<carSpec ID="11" PID="4">2014款-320Li-時尚型</carSpec>
<carSpec ID="12" PID="4">2014款-320Li-豪華型</carSpec>
</carSpecs>
js源檔案 carinforesolve.js
/**
* Created by 王坤 on 2014/7/17.
*/
/**
* 車輛資訊三級關聯方法
* @param carBrand carSeries carSpec 三個參數分别是三個select的id值
*注：調用如下代碼均可，無需實話化chosen插件
* $(document).ready(function () {
var dom = new carInfoResolve(車輛品牌select的id ,車輛車系select的id ,車輛車型select的id);
dom.init();
});
*/
var carInfoResolve = function(carBrand,carSeries,carSpec){
var carInfo = this;
this.carBrand = $("#"+carBrand);//車輛品牌select對象
this.carSeries = $("#"+carSeries);//車輛車系select對象
this.carSpec = $("#"+carSpec);//車輛車型select對象
/*車輛品牌初始化方法*/
this.carBrandInit = function(){
$.get("../js/carBrand.xml",{date:new Date().getTime()},function(data){
var carBrands = $(data).find("carBrand");//找到所有carBrand标簽對象
$(carBrands).each(function(index,element){ //疊代添加到車輛品牌select對象下
var id = $(element).attr("ID");//車輛品牌id
var value = $(element).text();//車輛品牌名
carInfo.carBrand.append("<option value="+value+" id="+id+">"+value+"</option>");
});
carInfo.carBrand.chosen(); //初始化chosen
},"xml");
carInfo.carSeries.chosen();//初始化chosen
carInfo.carSpec.chosen();//初始化chosen
};
/*車輛品牌選擇綁定方法*/
this.selectCarBrand = function(){
carInfo.carSeries.empty();
carInfo.carSeries.append("<option value=選擇名牌>選擇車系</option>");
carInfo.carSpec.empty();
carInfo.carSpec.append("<option value=選擇車型>選擇車型</option>");
if (carInfo.carBrand.val() == "選擇名牌") { //選擇無效時直接傳回
carInfo.carSeries.trigger("liszt:updated");
carInfo.carSpec.trigger("liszt:updated");
return;
}
var selectvalue = carInfo.carBrand.val();//擷取選擇的品牌值
var pid = $("option[value='"+selectvalue+"']").attr("id");//擷取選擇的品牌id
$.get("../js/carSeries.xml",{date:new Date().getTime()},function(data){
var carSeriess = $(data).find("carSeries[PID='"+pid+"']"); //擷取所選值品牌的所屬車系
$(carSeriess).each(function(index,element) {//疊代添加到車輛車系select對象下
var id = $(element).attr("ID");//車系id
var value = $(element).text();//車系名
carInfo.carSeries.append("<option value=" + value + " id=" + id + ">" + value + "</option>");
});
carInfo.carSeries.trigger("liszt:updated");
carInfo.carSpec.trigger("liszt:updated");
},"xml");
};
/*車系選擇綁定方法*/
this.selectcarSeries = function(){
if (carInfo.carSeries.val() == "選擇車系") return;
carInfo.carSpec.empty();
carInfo.carSpec.append("<option value=選擇車型>選擇車型</option>");
var selectvalue = carInfo.carSeries.val();擷取選擇的車系值
var pid = $("option[value='"+selectvalue+"']").attr("id");//擷取選擇的車系id
$.get("../js/carSpec.xml",{date:new Date().getTime()},function(data){
var carSpecs = $(data).find("carSpec[PID='"+pid+"']"); 擷取所選值品牌的所屬車型
$(carSpecs).each(function(index,element) {//疊代添加到車輛車型select對象下
var id = $(element).attr("ID");//車型id
var value = $(element).text();//車型名
carInfo.carSpec.append("<option value=" + value + " id=" + id + ">" + value + "</option>");
});
carInfo.carSpec.trigger("liszt:updated");
},"xml");
};
/*對象初始化方法*/
this.init = function(){
carInfo.carBrand.append("<option value=選擇名牌>選擇名牌</option>");
carInfo.carSeries.append("<option value=選擇車系>選擇車系</option>");
carInfo.carSpec.append("<option value=選擇車型>選擇車型</option>");
carInfo.carBrandInit();
carInfo.carBrand.bind("change",carInfo.selectCarBrand);
carInfo.carSeries.bind("change",carInfo.selectcarSeries);
}
}
chosen.jquery.js 是 jquery的插件
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)