<!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. 《剑指offer》第七题（重要！重建二叉树）
			
    文件一:main.cpp // 面试题:重建二叉树 // 题目:输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输 // 入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历 ...
    
			
    2. 
						
  2. /etc/fstab 文件解析
			
    首先介绍一下fstab :这个文件描述系统中各种文件系统的信息.一般而言,应用程序仅读取这个文件,而不对它进行写操作.对它的维护是系统管理员的工作.在这个文件中,每个文件系统用一行来描述,在每一行中, ...
    
			
    3. 
						
  3. php.ini配置说明
			
    1.设置时区为中国时区 date.timezone = PRC 2.设置支持MySql数据 extension=php_pdo_mysql.dll 直接将这个注释打开就OK了 3.让PHP支持简写&l ...
    
			
    4. 
						
  4. 20170728xlVba SSC_TODAY
			
    Public Sub SSC_TODAY() Dim strText As String Dim Reg As Object, Mh As Object, OneMh As Object Dim i  ...
    
			
    5. 
						
  5. Java基础-this关键字和构造方法(10)
			
    this关键字 方法被哪个对象调用,this就代表那个对象当局部变量隐藏成员变量时,使用this关键字(例如构造方法和访问器). 构造方法 构造方法作用概述 给对象的数据进行初始化 构造方法格式 方法 ...
    
			
    6. 
						
  6. Axel and Marston in Bitland CodeForces - 782F (bitset优化)
			
    题目链接 $dp[0/1][i][x][y]$表示起始边为0/1, 走$2^i$ 步, 是否能从$x$走到$y$ 则有转移方程 $dp[z][i][x][y]\mid=dp[z][i-1][x][k] ...
    
			
    7. 
						
  7. ubuntu软件(查看文件差异)
			
    你可以在ubuntu系统自带的软件--->ubuntu软件中心输入:meld diff 就可以安装.
    
			
    8. 
						
  8. UVA-10118 Free Candies （DP、记忆化搜索）
			
    题目大意:有4堆糖果,每堆有n个,有一只最多能容5个糖果的篮子.现在,要把糖果放到篮子里,如果篮子中有相同颜色的糖果,放的人就可以拿到自己的口袋.如果放的人足够聪明,问他最多能得到多少对糖果. 题目分 ...
    
			
    9. 
						
  9. 使用XML Publisher导出PDF报表
			
    生成XML数据源有两种方式. 一种是使用存储过程,返回一个clob作为xml数据源. 另一种是直接使用VO中的数据生成xml数据源. 方法一参考: Oracle XML Publisher技巧集锦 O ...
    
			
    10. 
						
  10. iOS UI-创建空项目
			
    一.创建工程 二.删除ViewController 三.在Supporting Files/Info.plist文件中清空值 四.创建新的控制器 五.写代码 1.在AppDelegate.h文件中 # ...
    
			
    11.