快捷導航

基于MVC方式實現(xiàn)三級聯(lián)動(JavaScript)

更新時間：2017年01月23日 08:41:23 作者：小小令

這篇文章主要為大家詳細介紹了基于MVC方式實現(xiàn)三級聯(lián)動的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了基于MVC三級聯(lián)動的具體代碼，供大家參考，具體內(nèi)容如下

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  模型 （數(shù)據(jù)）
  * controller  控制器
  * view  視圖
  * 下拉事件  由控制器處理
  * 獲取數(shù)據(jù)  由模型處理
  * 數(shù)據(jù)的顯示 由視圖處理
  * 控制器  發(fā)布指令  調(diào)用模型獲取數(shù)據(jù)
  *
  * 控制器拿到數(shù)據(jù)后發(fā)布指令將數(shù)據(jù)交給視圖進行顯示
  *
  *
  * */

  //定義一個控制器對象
  var ctrl={
    //初始化函數(shù)
    init:function(){
      this.createBrand();
    },
    //品牌函數(shù)
    createBrand:function(){

      //調(diào)用模型獲取數(shù)據(jù)
      var data=model.getBrand();

      //將數(shù)據(jù)交給視圖去渲染(顯示)
      view.showBrand(data);

      this.createModel();
      this.brandChange();
      this.modelChange();
    },
    //車型函數(shù)
    createModel:function(){

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

      var id=$('.model').val();
      var data=model.getCar(id);
      view.showCar(data);
    },
    //品牌點擊函數(shù)
    brandChange:function(){

      $('.make').change(function(){
        ctrl.createModel();
      })
    },
    //車型點擊函數(shù)
    modelChange:function(){

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

  //定義一個模型對象
  var model={
    //獲取第一個數(shù)據(jù)
    getBrand:function(){

      return car_make;
    },
    //獲取第二個數(shù)據(jù)
    getModel:function(id){

      return car_model[id];
    },
    //獲取第三個數(shù)據(jù)
    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>

最終顯示效果：