<!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. 【转】ArcGIS API for Silverlight/WPF 2.1学习笔记（一）

    源自:http://blog.163.com/zwx_gis/blog/static/32434435201122193611576/ (主页:http://blog.163.com/zwx_gis/ ...

  2. English trip -- FC（万词辩音王）

    五个元音字母+一个半元音字母 1.发字母本身音都是 元+辅+e 2.不发字母音基本都是辅音结尾或者两个相同字母  辅+元+辅;元+辅 开音节                              ...

  3. 5-11敏捷开发rails的章节： Rspec（使用方法） ，Slim(使用操作简介)

    Rspec: test Slim :可以取代ERB的模版语言.(简单了解了以下,方便写代码,但我觉得不方便读.还是用原生的html) Webpack管理css: 不再使用app/assets/styl ...

  4. java通过java.net.URL发送http请求调用接口

    一般在*.html,*.jsp页面中我们通过使用ajax调用接口,这个是我们通常用的.对于这些接口,大都是本公司写的接口供自己调用,所以直接用ajax就可以.但是,如果是多家公司共同开发一个东西,一个 ...

  5. configparser、subprocess模块

    一.configparser模块 该模块适用于配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键=值). 1.创建文件 一般软件的常见文档 ...

  6. Leetcode 77

    //这似乎是排列组合的标准写法了已经class Solution { public: vector<vector<int>> combine(int n, int k) { v ...

  7. HDOJ1003

    #include<iostream> using namespace std; int main() { ],t=,m; cin >> n; while(n--) { cin ...

  8. OC 对象调用属性或实例变量或方法的细节。

    1.成员变量可以理解为所有在类的头上声明的,无论是@interface.@implementation下用大括号括起来或者是用@property声明的变量都可以称作这个类的 成员变量,只是在@impl ...

  9. poj 2777线段树应用

    敲了n遍....RE愉快的debug了一晚上...发现把#define maxn = 100000 + 10 改成 #define maxn = 100010 就过了....感受一下我呵呵哒的表情.. ...

  10. CF 463A && 463B 贪心 && 463C 霍夫曼树 && 463D 树形dp && 463E 线段树

    http://codeforces.com/contest/462 A:Appleman and Easy Task 要求是否全部的字符都挨着偶数个'o' #include <cstdio> ...