<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
   </head>
   <body>
      <select >
         <option value="">品牌</option>
         <option value="">宝马</option>
         <option value="">奔驰</option>
      </select>
      <select  >

         <option value="">车型</option>
         <option value="">520LI</option>
      </select>
      <select  >

         <option value="">车款</option>
         <option value="">2016 1.8T</option>
      </select>

   </body>
   <script src="js/make_json.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/model_json.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/car_json.js" type="text/javascript" charset="utf-8"></script>
   <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">

      /**
       * 1. 更新车型  根据品牌ID   
       * 2. 更新车款  根据车型ID
       * 3..更新数据  根据上一级ID 
       * 
       *   根据ID可以获取对应的数据
       *   遍历数据生成html代码 
       *   根据HTML更新内容
       *   设置默认被选中的元素
       * 
       * mvc  
       *  model 模型  数据模型  数据
       *  view  视图   html代码  能看见的  以什么方式显示
       *  controller 控制器    逻辑部分 、应该做什么、准备做什么、什么事件触发 什么功能。。。。
       * 
       *  控制器-》发命令给  模型，让模型返回数据-》控制器得到数据 -》控制器将数据交给视图显示
       * 
       * 
       */

      (function($){

         //0.定义三个对象  分别是控制器、模型、视图

         var ctrl = {

            init:function(){

               console.log('初始化');

               this.create_brand();

               this.brand_change();

               this.model_change();

            },

            //创建品牌列表
            create_brand:function(){

               //调用模型方法获取品牌数据

               var data = model.get_brand();

               // 将数据交给视图，让视图来显示

               view.show_brand(data);

            },

            //创建车型列表

            create_model:function(){

               //获取ID   
               var id = $('select:first').val();

               //调用模型根据ID获取对应的车型数据

               var data = model.get_model(id);

               //将数据交给视图让其显示 

               view.show_model(data);

               //车型创建完之后立即创建车款

               ctrl.create_car();

            },

            create_car:function(){
               //获取ID   
               var id = $('select:eq(1)').val();

               //调用模型根据ID获取对应的车型数据

               var data = model.get_car(id);

               //将数据交给视图让其显示 

               view.show_car(data);               
            },

            //品牌切换事件
            brand_change:function(){

               var self = this;

               //品牌变化事件
               $('select:first').change(function(){

                  self.create_model()
               })

            },

            //车型切换事件
            model_change:function(){
               var self = this;
               //品牌变化事件
               $('select:eq(1)').change(function(){

                  self.create_car()

               })

            }

         };

         var model = {
            //获取品牌数据
            get_brand:function(){

               return make_json
            },

            //获取车型数据

            get_model:function(id){

               return model_json[id]

            },
            //获取车款数据

            get_car:function(id){

               return car_json[id]

            }

         };

         var view = {
            // 根据数据及选择器 创建html代码并更新到对应的元素上
            create_options:function(data,selector){

               //1.遍历生成html代码

               var html = '';

               $.each(data, function() {

                  html+='<option value="'+this.id+'">'+this.name+'</option>'

               });

               $(selector).html(html)

            },

            //根据品牌数据显示品牌列表
            show_brand:function(data){

               this.create_options(data,'select:first');

            },

            //根据车型数据显示车型列表
            show_model:function(data){

               this.create_options(data,'select:eq(1)');

            },
            //根据车款数据显示车款列表
            show_car:function(data){

               this.create_options(data,'select:last');

            }

         };

         //1.执行初始化

         ctrl.init();

      })(jQuery);

   </script>
</html>

MVC 模型 视图， 控制器 写 三级联动的更多相关文章

  1. 设计模式-结构型模式， mvc 模型视图控制器模式（8）

    MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式.这种模式用于应用程序的分层开发. Model(模型) - 模型代表一个存取数据的对象或 JAVA POJO.它 ...

  2. MVC(模型-视图-控制器)的理解

    在 MVC 中,模型对象表示数据(例如日历应用程序中的待办事项或绘图程序中的图形),视图对象知道如何显示模型对象所表示的数据,控制器对象充当模型和视图的媒介.在“HelloWorld”应用程序中,模型 ...

  3. 模型 - 视图 - 控制器（MVC）详解

    模型视图控制器(MVC)一个相当实用且十分流行的设计模式.作为一位称职码农,你不可能没听说过吧. 不幸的是它难以让人理解. 在本文中,我将给出我认为是MVC的最简单的解释,以及为什么你应该使用它. 什 ...

  4. 模型-视图-控制器模式（MVC模式，10种常见体系架构模式之一）

    一.简介: 架构模式是一个通用的.可重用的解决方案,用于在给定上下文中的软件体系结构中经常出现的问题.架构模式与软件设计模式类似,但具有更广泛的范围. 模型-视图-控制器模式,也称为MVC模式.是软件 ...

  5. [框架模式]经典的模型视图控制器模式MVC

    参考:<设计模式> http://blog.csdn.net/u010168160/article/details/43150049 百度百科 引言: Model(模型)是应用程序中用于处 ...

  6. MODEL-View-Controller,既模型-视图-控制器

    Swing组件采用MVC(MODEL-View-Controller,既模型-视图-控制器)设计模式,其中模型(Model)用于维护组件的各种状态,视图(View)是组件的可视化表现,控制器(Cont ...

  7. 设计模式 --- 模型-视图-控制器（Model View Controller）

    模型-视图-控制器(Model-View-Controller,MVC)是Xerox PARC在20世纪80年代为编程语言Smalltalk-80发明的一种软件设计模式,至今已广泛应用于用户交互应用程 ...

  8. 模型-视图-控制器的C++解释

    模型-视图-控制器 (MVC) 并非一种技术,而是软件设计/工程的一个概念.MVC包含三个组成部分,如下图所示 模型 模型直接响应对数据的处理,比如数据库.模型不应依赖其它组成部分,即视图或控制器,换 ...

  9. python设计模式之模型-视图-控制器模式

    python设计模式之模型-视图-控制器模式 关注点分离( Separation of Concerns, SoC)原则是软件工程相关的设计原则之一. SoC原则背后的思想是将一个应用切分成不同的部分 ...

随机推荐

  1. jsonp跨域远离

    http://blog.csdn.net/sky_beyond/article/details/54096275 function ajax( obj ){ // 默认参数 由于 jsonp 原理是 ...

  2. angular5 生命周期钩子函数

    生命周期执行顺序ngOnChanges 在有输入属性的情况下才会调用,该方法接受当前和上一属性值的SimpleChanges对象.如果有输入属性,会在ngOnInit之前调用. ngOnInit 在组 ...

  3. Codeforces Round #449 (Div. 1)C - Willem, Chtholly and Seniorious

    ODT(主要特征就是推平一段区间) 其实就是用set来维护三元组,因为数据随机所以可以证明复杂度不超过O(NlogN),其他的都是暴力维护 主要操作是split,把区间分成两个,用lowerbound ...

  4. jenkins X 和k8s CI/CD

    架构 二.核心组件 1.包管理工具     1.1.helm工具包    https://github.com/helm/helm      1.2.Chartmuseum开源helm chart仓库 ...

  5. sql 数据库显示 正在恢复

    问题原因:Sql Server 一直显示正在恢复.有事务未恢复或者还原数据库造成 处理办法: 步骤一:数据库上右键->任务->分离 步骤二:数据库上右键->任务->脱机 数据库 ...

  6. python的日志模块logging和syslog

    syslog模块是在unix环境下工作的模块,不能用于windows,在windows环境下可以使用logging模块. 一.syslog syslog模块可以用于记录系统运行的信息,这个模块提供的方 ...

  7. 玩转控件：重绘DEVEXPRESS中DateEdit控件 —— 让DateEdit支持只选择年月 (提供源码下载)

      前言 上一篇博文<玩转控件:重绘ComboBox —— 让ComboBox多列显示>中,根据大家的回馈,ComboBox已经支持筛选了,更新见博文最后最后最后面.   奇葩 这两天遇到 ...

  8. 如何最大限度提高.NET的性能

    优化 .NET的性能 1)避免使用ArrayList.     因为任何对象添加到ArrayList都要封箱为System.Object类型,从ArrayList取出数据时,要拆箱回实际的类型.建议使 ...

  9. 给tabBarItem加点击效果动画

    获取到tabBarItem,添加喜欢的动画 .h文件 @interface JGTabBarController () //记录上一次点击tabbar @property (nonatomic, as ...

  10. 【数据库】MFC ODBC(二)

    三.CRecordset类 1.IsBOF与IsEOF (1)IsBOF 如果记录集没有记录,或已经向前游动到第一个记录之前,则返回非零:否则返回0.详细说明如下: 1)访问Open函数之后,如果记录 ...