<!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. HTML表单格式化

    HTML表单格式化 一.说明 用table布局 二.效果 三.代码 <!DOCTYPE html> <html> <head> <title>Form. ...

  2. ArcGIS Runtime数据制作教程

    分类: ArcGIS Runtime 2012-04-20 22:25 879人阅读 评论(0) 收藏 举报 工具测试文档file工作c ArcGIS Runtime不能直接加载shp数据,或者mxd ...

  3. Knapsack CodeForces - 1132E (多重背包)

    可以将大量同种物品合并为$lcm$来优化, 复杂度$O(nlcm^2)$, 好像可以用bitset优化到$O(nlcm^2/\omega)$, 但是没看太懂 const int L = 840, M ...

  4. python-day41--数据库---数据类型

    一.存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 二.mysql 数据类型 1.数字:(宽度指的是显示宽度,与存储无关)     不用指定宽度, ...

  5. gleez开发环境搭建

    一．虚拟主机目录配置 1.配置apache服务器 Apache是常用的web服务器,即常见的用来处理http协议,处理网页的. Apache的配置文件都存放在/etc/apache2/目录,这里有很多 ...

  6. vue封装组件的正确方式-封装类似elementui的组件

    最近读了下element的源码,仿照他封装了两种不同的组件. 第一种:通过组件来调用显示的 <template> <!--src/component/custom/main.vue- ...

  7. Asp.Net 高性能ORM框架——SqlSugar

    公司团队项目.产品已经完全抛弃EF,SqlSugar定位不是ORM,而是为了方便的让你去写Sql. SqlSugar 媲美原生ADO.NET的性能,语法简洁,并且支持 Json .Dynamic. L ...

  8. iOS UI-QQ聊天布局

    一.Model BWMessage.h #import <Foundation/Foundation.h> typedef enum{ BWMessageMe = ,//表示自己 BWMe ...

  9. 用实例说明Spark stage划分原理

    注意:此文的stage划分有错,stage的划分是以shuffle操作作为边界的,可以参考<spark大数据处理技术>第四章page rank例子! 参考:http://litaotao. ...

  10. popen strtok 函数的使用

    FILE * popen ( const char * command , const char * type ); int pclose ( FILE * stream );   type 参数只能 ...