js三级联动

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

var car_json ={
   5001: [{
      name: "1.8 TSI 2012-2014",
      pinyin: "",
      id: 129643
   }],
   5002: [{
      name: "2.0 TSI 2012-2014",
      pinyin: "",
      id: 129176
   }]
};

var make_json = {
   aodi: {
      name: "奥迪",
      id: 272
   },
   baoma: {
      name: "宝马",
      id: 270
   }
   
}

var model_json = {
   201: [{
      name: "Leon Cupra",
      pinyin: "",
      id: 5002
   }, {
      name: "Leon FR",
      pinyin: "",
      id: 5001
   }]
}


      //0. 获取元素
      
      var selects = $('select');
      
      //品牌
      var make = selects.eq(0);
      
      //车型 
      var model = selects.eq(1);
      
      //车款
      var car = selects.eq(2);
      
      //1.遍历生成品牌列表
      
      var html = '';
      
      $.each(make_json,function(i){
         
         //2.将品牌信息拼接成html
         
         html+='<option value="'+this.id+'">'+this.name+'</option>';
         
      })
      
      //3.更新品牌列表
      
      make.children(':not(:first)').remove();
      
      make.append(html);
      
      //4.添加品牌change事件
      
      make.change(function(){
         
         //5.获取当前的品牌ID
         
         var id = this.value;
         
         //6. 根据品牌ID获取当前品牌下的车型数据
         
         var modelData = model_json[id] || [] ;
         
         
         //7.遍历车型 数据生成车型 列表
         
         var html = '';
         
         $.each(modelData,function(i){
         
            //8.将车型信息拼接成html
         
            html+='<option value="'+this.id+'">'+this.name+'</option>';
         
         })       
         
         //9.更新车型列表
         
         model.children(':not(:first)').remove();
         
         model.append(html);
         
         //9.1 设置默认被选中车型  获取车型 中的第二个选项
         
         model.children(':eq(1)').attr('selected',true);
         
         //9.2根据当前被选中的车型 获取对应的车款信息
         
         
         var id = model.val();
         
         //6. 根据车型ID获取当前品牌下的车款数据
         
         var carData = car_json[id] || [] ;
         
         
         //7.遍历车型 数据生成车型 列表
         
         var html = '';
         
         $.each(carData,function(i){
         
            //8.将车型信息拼接成html
         
            html+='<option value="'+this.id+'">'+this.name+'</option>';
         
         })       
         
         //9.更新车型列表
         
         car.children(':not(:first)').remove();
         
         car.append(html);        
         
         car.children(':eq(1)').attr('selected',true);
      })
      
      
      //10.车型change事件
      
      model.change(function(){
         
         //11.获取当前的车型ID
         
         var id = this.value;
         
         //6. 根据车型ID获取当前品牌下的车款数据
         
         var carData = car_json[id] || [] ;
         
         
         //7.遍历车型 数据生成车型 列表
         
         var html = '';
         
         $.each(carData,function(i){
         
            //8.将车型信息拼接成html
         
            html+='<option value="'+this.id+'">'+this.name+'</option>';
         
         })       
         
         //9.更新车型列表
         
         car.children(':not(:first)').remove();
         
         car.append(html);
         car.children(':eq(1)').attr('selected',true);
      })
      
   </script>
</html>