<!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. MySQL索引操作
			
    创建普通索引 CREATE INDEX index_name ON table_name(column1,column2); 另一种建立方式: ALTER TABLE table_name ADD I ...
    
			
    2. 
						
  2. 前端 ----关于DOM的事件操作
			
    关于DOM的事件操作   一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...
    
			
    3. 
						
  3. Jquyer轮播带数字和提示文字
			
    效果图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
    
			
    4. 
						
  4. Go代码重构：23倍的性能爆增
			
    几周前,我读了一篇名为“ Good Code vs Go Code中的错误代码 ”的文章,作者指导我们逐步完成实际业务用例的重构. 本文的重点是将“坏代码”转变为“良好代码”:更具惯用性,更易读,利用 ...
    
			
    5. 
						
  5. CodeCraft-19 and Codeforces Round #537 (Div. 2) 题解
			
    传送门 D. Destroy the Colony 首先明确题意:除了规定的两种(或一种)字母要在同侧以外,其他字母也必须在同侧. 发现当每种字母在左/右边确定之后,方案数就确定了,就是分组的方案数乘 ...
    
			
    6. 
						
  6. 牛客网 python 求解立方根
			
    •计算一个数字的立方根,不使用库函数 详细描述: •接口说明 原型: public static double getCubeRoot(double input) 输入:double 待求解参数 返回 ...
    
			
    7. 
						
  7. Failed to execute goal org.apache.tomcat.maven:tomcat7-maven-plugin:2.2:deploy (default-cli) on project Resource: Cannot invoke Tomcat manager: Connection refused: connect -> [Help 1]
			
    1.问题描述 在 DOS 下执行 tomcat7-maven-plugin 插件部署,启动 Apache Tomcat 服务报错如下: D:\2018\code\XXX>mvn tomcat7: ...
    
			
    8. 
						
  8. Oracle数据库内存使用情况分析查看
			
    SGA.PGA使用情况 select name,total,round(total-free,2) used, round(free,2) free,round((total-free)/total* ...
    
			
    9. 
						
  9. C++ 解析Json——jsoncpp（转）
			
    原文:https://www.cnblogs.com/liaocheng/p/4243731.html JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,和 ...
    
			
    10. 
						
  10. HTML&javaSkcript&CSS&jQuery&ajax（七）
			
    ’一.HTML5 实例  <video width="430" controls>   <source src="mov_nnn.mp4" t ...
    
			
    11.