<!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. android 开发 出错

    Error:Execution failed for task ':app:processDebugResources'. > com.android.ide.common.process.Pr ...

  2. 手动添加 launcher 到 Ubuntu Unity

    本来,启动程序之后,在左边的launcher bar点右键,[Lock to Launcher]就可以的. 但是,有时候因为某种原因,需要手工添加. 这时候,就要参考下面的文章了 http://ask ...

  3. Python的url解析库--urlparse

    一.urlparse解析url的query并构建字典 下面的方法主要的功能: 解析url的各个部分,并能够获取url的query部分,并把query部分构建成dict. 具体的代码实现: >&g ...

  4. WPF如何给窗口Window增加阴影效果

    https://blog.csdn.net/w_sx12553/article/details/45072861

  5. Confluence 6 连接一个目录

    你可以添加下面类型的目录服务器和目录管理器: Confluence 的内部目录(Configuring the Internal Directory). Microsoft Active Direct ...

  6. BOM对象思维导图

  7. laravel实现定时器功能

    前记 laravel实现定时器功能有两种方法: 1. 使用 command . 2.   在闭包函数内写实现的方法. 在这里我比较推荐第一种方法,因为第一种方法把具体的实现抽离出来了,看起来简单且富有 ...

  8. zzuli 1432(二进制特点)

      1432: 背包again Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 222  Solved: 65 SubmitStatusWeb Board ...

  9. @ConditionalOnProperty 详解

    @Retention(RetentionPolicy.RUNTIME) @Target({ElementType.TYPE, ElementType.METHOD}) @Documented @Con ...

  10. ShardedJedis的分片原理

    ShardedJedisPool xml配置: <bean id="shardedJedisPool" class="redis.clients.jedis.Sha ...