<!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. 对当前JAVA流行框架的一些小感悟
			
    这几年,蹦出了不少各种JAVA框架,像是spring boot.spring cloud 和spring mvc或者是mybatis等等. 不断有人感慨,技术更新的太快,自己学都学不过来了. 但是,这 ...
    
			
    2. 
						
  2. 【Robot Framework 项目实战 01】使用 RequestsLibrary 进行接口测试
			
    写在前面 本文我们一起来学习如何使用Robot Framework 的RequestsLibrary库,涉及POST.GET接口测试,RF用例分层封装设计等内容. 接口 接口测试是我们最常见的测试类型 ...
    
			
    3. 
						
  3. IdentityServer3零星笔记
			
    Scope 是什么?有哪几种类型?每种类型都怎么使用? StandardScopes.All是什么概念? 解释:在Scope的Claims属性里包含的所有声明(类型是ScopeClaim,它的name ...
    
			
    4. 
						
  4. threejs和particles.js
			
    particles.js 在线配置的东西: http://vincentgarreau.com/particles.js/ https://threejs.org/ http://thehuub.co ...
    
			
    5. 
						
  5. Python 爬虫-正则表达式
			
    2017-07-27 13:52:08  一.正则表达式的概念 (1)正则表达式是用来简洁表达一组字符串的表达式,最主要应用在字符串匹配中. 正则表达式是用来简洁表达一组字符串的表达式 正则表达式是一 ...
    
			
    6. 
						
  6. 一个Java例子，解释清楚注解的作用
			
    原文出处:码农登陆 写在前面 今天聊的是注解,但其实单纯说注解,注解本身没有任何的作用.简单说和注释没啥区别,而它有作用的原因是:注解解释类,也就是相关对代码进行解释的特定类.一般这些类使用反射是可以 ...
    
			
    7. 
						
  7. jsp动作之 getProperty
			
    getProperty就是用来获取(读取)实例化的内容的. 说明了就是(Techerobj实例为样,用name=张三,age=21等属性) <%=Techerobj.getName()%> ...
    
			
    8. 
						
  8. 源代码方式调试Mycat
			
    如果是第一次刚接触MyCat建议下载源码在本地通过eclipse等工具进行配置和运行,便于深入了解和调试程序运行逻辑. 1)源代码方式调试与配置 由于MyCat源代码目前主要托管在github上,大家 ...
    
			
    9. 
						
  9. Educational Codeforces Round 47 (Rated for Div. 2)F. Dominant Indices 线段树合并
			
    题意:有一棵树,对于每个点求子树中离他深度最多的深度是多少, 题解:线段树合并快如闪电,每个节点开一个权值线段树,递归时合并即可,然后维护区间最多的是哪个权值,到x的深度就是到根的深度减去x到根的深度 ...
    
			
    10. 
						
  10. vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
			
    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
    
			
    11.