<!DOCTYPE HTML>

<html>

<head>

<title>联动菜单</title>

<meta charset="utf-8" />

<script>

    /*使用 HTML DOM 的方式实现联动菜单*/

    var categories=[

{"id":10,"name":'男装',"children":[

    {"id":101,"name":'正装'},

    {"id":102,"name":'T恤'},

    {"id":103,"name":'裤衩'}

]},

{"id":20,"name":'女装',"children":[

    {"id":201,"name":'短裙'},

    {"id":202,"name":'连衣裙'},

    {"id":203,"name":'裤子',"children":[

        {"id":2031,"name":'长裤'},

        {"id":2031,"name":'九分裤'},

        {"id":2031,"name":'七分裤'}

    ]},

]},

{"id":30,"name":'童装',"children":[

    {"id":301,"name":'帽子'},

    {"id":302,"name":'套装',"children":[

        {"id":3021,"name":"0-3岁"},

        {"id":3021,"name":"3-6岁"},

        {"id":3021,"name":"6-9岁"},

        {"id":3021,"name":"9-12岁"}

    ]},

    {"id":303,"name":'手套'}

]}

];

    function createSel(cts){//传入包含一组类别对象的数组

        //创建select元素，保存在变量sel中

        var sel=document.createElement("select");

        //向sel添加一个新option，设置内容为"-请选择-",值为-1

        sel.add(new Option("-请选择-",-1));

        //遍历cts中的每个类别对象

        for(var i=0;i<cts.length;i++){

            //向sel中添加一个新option，设置内容为当前类别的内容，设置值为当前类别的id

            sel.add(new Option(cts[i].name,cts[i].id));

        }//(遍历结束)

        //cts:[{男装,},{女装,},{童装,children:[{sub1},...]

        //                      i-1

        sel.onchange=function(){//this->sel

            //获得当前sel选中项的下标，保存在变量i中

            var i=this.selectedIndex;

            //获得cts中下标为i-1位置的子类型对象,保存在cate中

            var cate=cts[i-1];

            //反复删除category下的最后一个子节点，直到category的最后一个子节点就是当前sel时，退出循环

            while(category.lastChild!=this){

                category.removeChild(category.lastChild);

            }

            if(cate.children){//如果cate有children属性

                //调用createSel，传入cate的children数组作为参数

                createSel(cate.children);

            }

        }

        //将sel追加到id为category的元素中

        category.appendChild(sel);

    }

    window.onload=function(){

        createSel(categories);

    }

</script>

</head>

<body>

    <div id="category"></div>

</body>

</html>


    var data = {

    "province": ["广东省","山东省","西安"],

    "city":{

        "广东省":["韶关市1","韶关市2","韶关市3","韶关市4","韶关市"],

        "山东省":["韶关市","韶关市","韶关市","韶关市","韶关市"],

        "西安":["韶关市66","韶关市77","韶关市88","韶关市99","韶关市"],  

        }

    }  

        var Pro1='';

        for(var i=0;i<data.province.length;i++){

            Pro1+='<option value="">'+data.province[i]+'</option>';

        }  

         $("#province").on('change',function(){

             var oCity=document.getElementById('city');

             oCity.innerHTML='<option>市</option>';

             var City1='';

             var City2=$('#province').children('option:selected').text();

             for(var city_1 in data.city){

                 if(City2==city_1){

                     for(var i=0;i<data.city[city_1].length;i++){

                         City1+='<option value="">'+ data.city[city_1][i] +'</option>';

                     }

                        $('#city').append(City1);  

                 }

             }

         })  

        $('#province').append(Pro1);


 


												


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

    
						
  1. 用js写三级联动
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    2. 
								
  2. QQ JS省市区三级联动
		
    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
    
		
    3. 
						
  3. JS年月日三级联动下拉框日期选择代码
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    4. 
						
  4. MVC图片上传详解   IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS  C#中Enum用法小结  表达式目录树  “村长”教你测试用例  引用provinces.js的三级联动
		
    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...
    
		
    5. 
						
  5. 从QQ网站中提取的纯JS省市区三级联动
		
    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
    
		
    6. 
						
  6. 原生JS实现三级联动
		
    代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
    
		
    7. 
						
  7. JS 省市区三级联动
		
    JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
    
		
    8. 
						
  8. PHP用ajia代码写三级联动下拉
		
    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...
    
		
    9. 
						
  9. JS省市区三级联动
		
    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. tomcat和springboot访问日志及分析
			
    1.Tomcat设置访问日志 <Host name="localhost" appBase="webapps" unpackWARs="true ...
    
			
    2. 
						
  2. [POSIX]文件系统（概述）
			
    1.文件名由除系统目录分隔符(unix是/,windows是\)和空字符“\0”外的任意ASCII字符组成,现代系统很多还可以包含UNICODE字符,但是还是推荐使用传统的ASCII码命名. 2.目录 ...
    
			
    3. 
						
  3. servlet web.xml配置选项详解
			
    一般的web工程中都会用到web.xml,web.xml主要包括一些配置标签,例如Filter.Listener.Servlet等,可以用来预设容器的配置,可以方便的开发web工程.但是web.xml ...
    
			
    4. 
						
  4. mysql5.7设置简单密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
			
    注:本文来源于<  mysql5.7设置简单密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy r ...
    
			
    5. 
						
  5. vivado 下安装modelsim
			
    安装modelsim 下载链接:http://pan.baidu.com/s/1i4vHDbR 密码:dksy 1.运行modelsim-win64-10.4-se.exe,安装软件: 注意事项:安装 ...
    
			
    6. 
						
  6. ubuntu sublime text 3 安装
			
    #安装GPG wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add - #确保apt被设置为 ...
    
			
    7. 
						
  7. wireless Penetration Testing  &  Honeypot and Mis-Association attacks
			
    重新记一遍 ,在捕获握手数据包的时候不容易获取,所以使用ARP请求.使用自己的无线网卡的地址发送请求,会容易使得无线开启端掉线,迫使重新连接. 1.使用命令   aireplay-ng -3 -b a ...
    
			
    8. 
						
  8. bzoj 3529
			
    非常好的一道莫比乌斯反演题,对提升自己的能力有很大帮助. 首先我们分析一下题意:题意让我们求,其中 那么我们首先对后面的式子进行一下变形,变形过程详见https://blog.csdn.net/lle ...
    
			
    9. 
						
  9. bootstrap-table 刷新页面数据
			
    bom.bootstrapTable('load',msg['object']);//这一步 务必要添加. if(msg['code']==1){ bom.find('tbody').css('dis ...
    
			
    10. 
						
  10. centos7.4/rehat7.0系统安装
			
    以下是安装过程:(图解),以下是rehat为例 这里可以改为centos的镜像 之后就可以用了,记得做快照!!! 拓展:分离使用 效果:
    
			
    11.