基于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作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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购物网站支付paypal使用方法
2010/11/28 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
Python实现二维有序数组查找的方法
2016/04/27 Python
使用Python生成XML的方法实例
2017/03/21 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Php多进程实现代码
2018/05/07 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Python如何在DataFrame增加数值
2020/02/14 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
暑期教师培训方案
2014/06/07 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
党支部活动策划方案
2014/08/18 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
运动会广播稿200字
2015/08/19 职场文书