基于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 相关文章推荐
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 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
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
PHP数据过滤的方法
2013/10/30 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
jquery实现textarea 高度自适应
2015/03/11 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
Python发送email的3种方法
2015/04/28 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
Django框架首页和登录页分离操作示例
2019/05/28 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
详解python statistics模块及函数用法
2019/10/27 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
师范生自我鉴定范文
2013/10/05 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
优秀教师工作感言
2014/02/16 职场文书
民主生活会剖析材料
2014/09/30 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
公司联欢会主持词
2015/07/04 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
浅谈redis整数集为什么不能降级
2021/07/25 Redis