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

本文实例为大家分享了基于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 # 三级联动 # 详解ASP.NET MVC之下拉框绑定四种方式 # ASP.NET MVC下拉框联动实例解析 # asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常 # 基于MVC3方式实现下拉列表联动(JQuery) # Spring MVC中Ajax实现二级联动的简单实例 # MVC实现下拉框联动效果（单选） # 请选择 # 第二个 # 大家分享 # 具体内容 # 大家多多 # 显示效果 # jquery # src # car # js # script # min # var # ctrl # init # view # OOP

返回目录在线咨询

上一篇：Python内存管理系统学习路线第33讲_核心原理与实战案例详解【指导】
下一篇：WDCP环境下如何备份与恢复网站数据？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求