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


											
js三级联动的更多相关文章
	

    
						
  1. 省市区js三级联动（原创）
		
    看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...
    
		
    2. 
						
  2. js 三级联动
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
    
		
    3. 
						
  3. js 三级联动 1
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
    
		
    4. 
						
  4. 简单的纯js三级联动
		
    参考这个  日尼禾尔  二级联动 写了三级联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
    
		
    5. 
						
  5. 原生js三级联动
		
    <!DOCTYPE html> <html lang="en"> <head> <title> 三级联动 </title> ...
    
		
    6. 
						
  6. Js三级联动菜单
		
    效果演示: <SCRIPT LANGUAGE="JavaScript"> <!-- function CreateSelect(_FormName,_SName, ...
    
		
    7. 
								
  7. JS三级联动实例
		
    简单的HTML实例: <h4>选择省</h4> <div class="selectSheng"></div> <select ...
    
		
    8. 
						
  8. js三级联动效果city-picker
		
    链接:https://pan.baidu.com/s/1NE_EO5_xGvR-y-lboYap7g 提取码:h00e 效果展示: 解决: 动态赋值: 注意:在执行赋值之前,必须执行reset和des ...
    
		
    9. 
						
  9. 三级联动第二种方法  三级联动.html
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Codeforces 894B - Ralph And His Magic Field
			
    894B - Ralph And His Magic Field 思路: 当k为1时,如果n和m奇偶性不同,那么没有答案. 可以证明,在其他情况下有答案,且答案为2^(n-1)*(m-1),因为前n- ...
    
			
    2. 
						
  2. angular5表单验证问题
			
    例举一个patten的列子 可能出现的问题,表单元素需要添加name属性 还有的验证如maxlength,minlength,required等 一.验证某一个表单元素如下 *ngIf="s ...
    
			
    3. 
						
  3. Ubuntu安装NVIDA显卡驱动
			
    0. 综述 电脑型号:R720 Ubuntu版本:16 显卡型号:1050ti 目前,知道3种安装N卡驱动的方法: 1. PPA源:最简便,但未必有最新驱动(亲测),或可能遇到问题(风闻). sudo ...
    
			
    4. 
						
  4. WPF几种高级绑定
			
    (1)Binding  + RelativeSource + AncestorType 模式  , 根据关联源所指定的类型,可动态绑定指定类型的Path属性(Path可以省略)(PS:动态指父级在运行 ...
    
			
    5. 
						
  5. English trip -- VC(情景课)4 A Health
			
    Word doctor doctor's office medicine   [ˈmɛdɪsɪn]  n. 药:医学:内科:巫术  vt. 用药物治疗:给…用药 pill  n. 药丸 nurse   ...
    
			
    6. 
						
  6. Population Size CodeForces - 416D (贪心,模拟)
			
    大意: 给定$n$元素序列$a$, 求将$a$划分为连续的等差数列, 且划分数尽量小. $a$中的$-1$表示可以替换为任意正整数, 等差数列中必须也都是正整数. 贪心策略就是从前到后尽量添进一个等差 ...
    
			
    7. 
						
  7. python-day30--粘包
			
    一. 什么是粘包 1.须知:只有TCP有粘包现象,UDP永远不会粘包 2.所谓粘包问题主要还是因为接收方不知道消息之间的界限,不知道一次性提取多少字节的数据所造成的. 二.两种情况下会发生粘包. 1. ...
    
			
    8. 
						
  8. python-day7-数字类型的内置方法
			
    #=====>part1:数字类型#掌握:int,float#了解:Long(在python2中才有),complex# num=10# num=int(10)# print(type(num) ...
    
			
    9. 
						
  9. 万恶的deferred_segment_creation（延迟块分配）
			
    11gR2开始,空表是不分配segment的.由于没有分配 segment, EXP默认不能导出空表,user_objects有该对象但是 user_segment没有该对象
    
			
    10. 
						
  10. OAF多语言的实现
			
    在之前的文章中转载了一篇关于多语言实现的文章. OAF中多语言的实现(转) 现在我来讲讲另外一种情况. 在建立工程项目没有特别选择语言,所以所有的PG或RN页面都是英文的,在页面原文件中可看到如下内容 ...
    
			
    11.