基于MVC的三级联动

Html代码：

<div class="box">
    <select class="make">
        <option>请选择品牌</option>
    </select>
    <select class="model">
        <option>请选择车型</option>
    </select>
    <select class="car">
        <option>请选择车款</option>
    </select>
</div>

js代码：

<script src="jquery-1.8.3.min.js"></script>
<script src="car.make.js"></script>
<script src="car.car.js"></script>
<script src="car.model.js"></script>
<script>
    //MVC与OOP模式
    /*
    * mvc编程思想
    * model   模型 （数据）
    * controller   控制器
    * view   视图
    * 下拉事件    由控制器处理
    * 获取数据    由模型处理
    * 数据的显示  由视图处理
    * 控制器   发布指令   调用模型获取数据
    *
    * 控制器拿到数据后发布指令将数据交给视图进行显示
    *
    *
    * */

    //定义一个控制器对象
    var ctrl={
        //初始化函数
        init:function(){
            this.createBrand();
        },
        //品牌函数
        createBrand:function(){

            //调用模型获取数据
            var data=model.getBrand();

            //将数据交给视图去渲染(显示)
            view.showBrand(data);

            this.createModel();
            this.brandChange();
            this.modelChange();
        },
        //车型函数
        createModel:function(){

            var id=$('.make').val();
            var data=model.getModel(id);
            view.showModel(data);
            this.createCar();
        },
        //车款函数
        createCar:function(){

            var id=$('.model').val();
            var data=model.getCar(id);
            view.showCar(data);
        },
        //品牌点击函数
        brandChange:function(){

            $('.make').change(function(){
                ctrl.createModel();
            })
        },
        //车型点击函数
        modelChange:function(){

            $('.model').change(function(){
                ctrl.createCar();
            })
        }
    };

    //定义一个模型对象
    var model={
        //获取第一个数据
        getBrand:function(){

            return car_make;
        },
        //获取第二个数据
        getModel:function(id){

            return car_model[id];
        },
        //获取第三个数据
        getCar:function(id){

            return car_car[id];
        }
    };

    //定义一个视图对象
    var view={
        //下拉列表
        createSelect:function(title,data,element){

            var html='<option>'+title+'</option>';
            $.each(data,function(){

                html+='<option value="'+this.id+'">'+this.name+'</option>'
            });

            element.html(html);

            element.children().eq(1).attr('selected',true);
        },
        //品牌
        showBrand:function(data){

            this.createSelect('请选择品牌',data,$('.make'));
        },
        //车型
        showModel:function(data){

            this.createSelect('请选择车型',data,$('.model'));
        },
        //车款
        showCar:function(data){

            this.createSelect('请选择车款',data,$('.car'));
        }
    };

    ctrl.init();

</script>

最终显示效果：