基于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监听鼠标滚轮事件浅析
Jun 05 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
微信小程序入门之指南针
Oct 22 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
利用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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python 调用c语言函数的方法
2017/09/29 Python
详解supervisor使用教程
2017/11/21 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python之变量类型和if判断方式
2020/05/05 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
Joules美国官网:出色的英国风格
2017/10/30 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
大学生村官演讲稿
2014/04/25 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
职务说明书范文
2014/05/07 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
Python基础之元类详解
2021/04/29 Python
Python基础知识学习之类的继承
2021/05/31 Python
详解Python类和对象内容
2021/06/22 Python
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏