<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三级联动例子</title>
<link href="../css/chosen.css" 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 version="1.0" encoding="utf-8"?>
<carBrands>
<carBrand ID="1">A 奥迪</carBrand>
<carBrand ID="2">B 宝马</carBrand>
</carBrands>
<?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>
<?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>
/**
* 车辆信息三级联动方法
* @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);
}
}