MVC方式如何實現三級聯動

這篇文章給大家分享的是有關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>

最終顯示效果：

感謝各位的閱讀！關于“MVC方式如何實現三級聯動”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！