<!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. tp3.x和tp 5的区别

    由于TP5.0是一个全新的颠覆重构版本,所以现在面试很多面试官喜欢问TP3.2和TP5之间的区别,那他们之间到底有哪些区别呢?一.目录  TP5目录 二.需要摒弃的 3.X 旧思想 模型的变动     ...

  2. Shell循环输入符合条件为止

    提供用户输入,直到输入d/D/r/R为止. #!/bin/bash ]; do echo -n "(D)ebug or (R)elease?" read select_build_ ...

  3. Java 访问权限修饰符以及protected修饰符的理解

    2017-11-04 22:28:39 访问权限修饰符的权限 访问修饰符protected的权限理解 在Core Java中有这样一段话“在Object类中,clone方法被声明为protected, ...

  4. IntelliJ IDEA 进行多线程调试

      idea的断点有不同的模式,只有当Thread模式下才能调试多线程   断点设置步骤: 1.在断点上右键 2.选择Thread,然后点Done(建议选择Thread后点击make default把 ...

  5. codeforces 700a//As Fast As Possible// Codeforces Round #364(Div. 1)

    题意:n个人要运动ll长,有个bus带其中几个人,问最短时间 最后所有人在同一时间到终点是用时最少的.由于搭bus相当于加速,每个人的加速时间应该一样.先计算bus走过的路程route.看第一个人被搭 ...

  6. Python进阶--常用模块

    一.模块.包 什么是模块? 模块实质上就是一个python文件,它是用来组织代码的,意思就是说把python代码写到里面,文件名就是模块的名称,test.py test就是模块名称. 什么是包? 包, ...

  7. 连接ACCESS

    access2000-2003数据库连接字符串: ConStr = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=数据库名.mdb"; ...

  8. OC ARC之循环引用问题（代码分析）

    // // main.m // 03-arc-循环引用 // // Created by apple on 13-8-11. // Copyright (c) 2013年 itcast. All ri ...

  9. UVALive 5846 计数

    DES:给出任意两点之间连线的颜色.问一共会有多少个由相同颜色的边组成的三角形. 一共有C(3, n)个三角形.考虑一每个点为顶点的三角形.颜色不同的两条边组成的三角形一定不行.所以减去. 题目链接: ...

  10. hdu4800 Josephina and RPG 解题报告

    Josephina and RPG Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...