<!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. 【Golang 接口自动化01】使用标准库net/http发送Get请求
			
    发送Get请求 使用Golang发送get请求很容易,我们还是使用http://httpbin.org作为服务端来进行演示. package main import ( "bytes&quo ...
    
			
    2. 
						
  2. Spring AMQP 源码分析 02 - CachingConnectionFactory
			
    ### 准备 ## 目标 了解 CachingConnectionFactory 在默认缓存模式下的工作原理   ## 前置知识   <Spring AMQP 源码分析 01 - Impatie ...
    
			
    3. 
						
  3. API网关 动态路由、监控、授权、安全、调度
			
    1.API网关介绍 API网关是一个服务器,是系统的唯一入口.从面向对象设计的角度看,它与外观模式类似.API网关封装了系统内部架构,为每个客户端提供一个定制的API.它可能还具有其它职责,如身份验证 ...
    
			
    4. 
						
  4. Spring Cloud 学习网址
			
    1. https://blog.csdn.net/forezp/article/details/70148833  史上最简单的 SpringCloud 教程 (非常适合新手快速上手教程)2.http ...
    
			
    5. 
						
  5. git rm删除
			
    在Git中,删除也是一个修改操作,我们实战一下,先添加一个新文件test.txt到Git并且提交: $ git add test.txt $ git commit -m "add test. ...
    
			
    6. 
						
  6. 『Python』图像金字塔、滑动窗口和非极大值抑制实现
			
    图像金字塔 1.在从cv2.resize中,传入参数时先列后行的 2.使用了python中的生成器,调用时使用for i in pyramid即可 3.scaleFactor是缩放因子,需要保证缩放后 ...
    
			
    7. 
						
  7. 多态性&& 虚函数 && 抽象类
			
    http://www.cnblogs.com/CaiNiaoZJ/archive/2011/08/11/2134673.html 多态性 指相同对象收到不同消息或不同对象收到相同消息时产生不同的实现动 ...
    
			
    8. 
						
  8. Data Guard Wait Events
			
    This note describes the wait events that monitor the performance of the log transport modes that wer ...
    
			
    9. 
						
  9. python的日志模块logging和syslog
			
    syslog模块是在unix环境下工作的模块,不能用于windows,在windows环境下可以使用logging模块. 一.syslog syslog模块可以用于记录系统运行的信息,这个模块提供的方 ...
    
			
    10. 
						
  10. learning docker steps(8)  ----- docker network 初次体验
			
    参考: docker network 主要是介绍了docker 容器之间的组网模式, 一般来说实像组网主要是依赖于bridge iptalbes vlan来实现,但是附带的如端口转发会降低效率. 新型 ...
    
			
    11.