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>

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

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

随机推荐

URAL 1741 Communication Fiend
URAL 1741 思路: dp 状态:dp[i][1]表示到第i个版本为正版的最少流量花费 dp[i][0]表示到第i个版本为盗版的最少流量花费初始状态:dp[1][0]=dp[0][0]=0 目 ...
http和WebSocket
有关http和WebSocket 的区别网上有很多的质料. 个人在此仅仅是记录以下自己的学习心得,自己的理解. 1. http协议是用在应用层的协议,他是基于tcp协议的,http协议建立链接也必须要 ...
stats.js随时查看fps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
delphi文件名获取方法
取文件名 ExtractFileName(FileName); 取文件扩展名: ExtractFileExt(filename); 取文件名,不带扩展名: 方法一: Function Extrac ...
Silverlight自定义控件系列 – TreeView (4) 缩进
接下来是缩进,没有缩进的Tree怎么看都不顺眼. 首先,定义节点深度Depth(注:回叫方法暂没有代码,以后要用到): 1: /// <summary> 2: /// Using a De ...
pip 源替换国内源
网上收集来的pip源地址: 阿里云 http://mirrors.aliyun.com/pypi/simple/中国科技大学 https://pypi.mirrors.ustc.edu.cn/simp ...
原创-整理了下常用的js数组、对象、数字、字符串的操作方法
终于整理好了...主要是一些常用的函数,包含es6和es5的所有常用的,吧一些不常用的全部砍掉,省的大家看的费事.发现这个到博客上面有点乱.给个百度云地址:https://pan.baidu.com/ ...
HDOJ1007
/** 最近点对问题,时间复杂度为O(n*logn*logn) */ #include <iostream> #include <cstdio> #include <cs ...
c#将Excel数据导入到数据库的实现代码
这篇文章主要介绍了c#将Excel数据导入到数据库的实现代码,有需要的朋友可以参考一下假如Excel中的数据如下: 数据库建表如下: 其中Id为自增字段: 代码: 代码如下: using Syste ...
cas 认证管理器
CAS-默认的认证管理器:AuthenticationManagerImpl <bean id="authenticationManager" class="org ...

js三级联动

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

随机推荐

热门专题