jquery chosen 三级联动

最新推荐文章于 2022-09-01 16:58:04 发布

dongflying

最新推荐文章于 2022-09-01 16:58:04 发布

阅读量1.7k

点赞数 1

分类专栏： JS

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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);
	}
}

dongflying

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery chosen 三级联动

三级联动例子 $(document).ready(function() { var dom = new carInfoResolve("swapCarBrand", "swapCarSeries", "swapCarSpec"); dom.init(); });
复制链接

扫一扫