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


Posted in Javascript onJanuary 23, 2017

本文实例为大家分享了基于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方式实现三级联动(JavaScript)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于jQuery object and DOM element
Apr 15 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
JS获取时间的方法
Jan 21 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 #Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 #Javascript
js选项卡的制作方法
Jan 23 #Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 #Javascript
详解javascript中对数据格式化的思考
Jan 23 #Javascript
JavaScript 栈的详解及实例代码
Jan 22 #Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 #Javascript
You might like
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
python实现BackPropagation算法
2017/12/14 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
银行实习自我鉴定
2013/10/12 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
售后服务承诺书范文
2014/03/26 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
2014组织生活会方案
2014/05/19 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
Log4j.properties配置及其使用
2021/08/02 Java/Android
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers