<!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. springcloud-3:required a bean of type 'com.netflix.discovery.DiscoveryClient' that could not be found.
			
    在写客户端程序的时候,总是报'com.netflix.discovery.DiscoveryClient' that could not be found. 原因在于导入了错误的类:com.netfl ...
    
			
    2. 
						
  2. bootstrap排列顺序
			
    写在 typora 的笔记 复制过来排版很丑,所以截图算了..
    
			
    3. 
						
  3. peizhiwenjian
			
    自定义配置文件 如果你不想使用application.properties作为配置文件,怎么办?完全没问题 java -jar myproject.jar --spring.config.locati ...
    
			
    4. 
						
  4. JSP中request获取值
			
    获取项目名:request.getContextPath(); 获取IP:request.getServerName() 获取端口:request.getServerPort() pageContex ...
    
			
    5. 
						
  5. Android gradle provided、implementation等指令注意点
			
    其实这类文章博客网上一搜一大堆,但有些地方可能说的不太清楚(都一样的内容,抄袭太严重),这里只是做个精简的总结和一些其他地方没提到的点. 一.Android Studio 3.0开始使用了新的指令,原 ...
    
			
    6. 
						
  6. redhat7.3  superset的离线安装
			
    superset是一个python 开发的可视化工具,可以与kylin连接进行数据分析,在官网的讲解中,采用了在线安装方式,生产环境中有yum源,但是没有网,不得不采用离线安装方式.(我们先在有网的环 ...
    
			
    7. 
						
  7. 尚硅谷《全套Java、Android、HTML5前端视频》
			
    尚硅谷<全套Java.Android.HTML5前端视频> (百万谷粉推荐:史上最牛.最适合自学的全套视频.资料及源码) [尚硅谷官网资料导航] 谷粒学院在线学习:http://www.g ...
    
			
    8. 
						
  8. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）
			
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
			
    9. 
						
  9. Linux基础实操二
			
    实操一: 1) 新建用户natasha uid为1000,gid为555,备注信息为“master” 2) 修改natasha用户的家目录为/Natasha 3) 查看用户信息配置文件的最后一行 ca ...
    
			
    10. 
						
  10. dbcp连接池出现的问题java.lang.AbstractMethodError: com.mysql.jdbc.Connection.isValid(I)Z
			
    解决方案:mysql-connector 版本为 5.0.4 ,那么对应的 dbcp 和 pool 版本应该为 1.4 和 1.6 .    5.0.4 不应该使用 2.0 及以上版本的 dbcp 和 ...
    
			
    11.