select三级联动结合jquery的chosen.jquery.js 插件一起使用原创案例

最新推荐文章于 2021-12-22 09:54:41 发布

置顶 meng512199

最新推荐文章于 2021-12-22 09:54:41 发布

阅读量4.9k

点赞数 1

分类专栏：三级联动 js chosen 文章标签： JavaScript 三级联动 chosen jquery select

本文链接：https://blog.csdn.net/meng512199/article/details/37923833

版权

三级联动同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

chosen

1 篇文章 0 订阅

订阅专栏

text.html页面源码：

<!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配置文件如下：

第一级文件 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的插件