基于MVC方式实现三级联动(JavaScript)

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

<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>