<!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>