<!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. 神经网络rbf
			
    clc; clear; close all; ld=400; %定义学习样本的数量 x=rand(2,ld); %得到一个2 * 400的一个矩阵,每个元素在0-1之间 x=(x-0.5)*1.5*2 ...
    
			
    2. 
						
  2. mtu简单说明
			
    总结:本地的mtu值==网络设备的mtu值是最优的,一般本地和网络设备的默认值都是1500(字节),没什么特殊需求,尽量不要修改 一.什么是 MTU 值   1 从字面上来说,MTU 是英文 Maxi ...
    
			
    3. 
						
  3. android系统下消息推送机制
			
    一.推送方式简介: 当前随着移动互联网的不断加速,消息推送的功能越来越普遍,不仅仅是应用在邮件推送上了,更多的体现在手机的APP上.当我们开发需要和服务器交互的应用程序时,基本上都需要获取服务器端的数 ...
    
			
    4. 
						
  4. (转)scikit-learn主要模块和基本使用方法
			
    从网上看到一篇总结的很不错的sklearn使用文档,备份勿忘. 引言 对于一些开始搞机器学习算法有害怕下手的小朋友,该如何快速入门,这让人挺挣扎的.在从事数据科学的人中,最常用的工具就是R和Pytho ...
    
			
    5. 
						
  5. Confluence 6 PostgreSQL 设置准备
			
    请查看 Supported Platforms 页面来获得 Confluence 系统支持的 PostgreSQL 数据库版本.你需要在安装 Confluence 之前升级你的 PostgreSQL  ...
    
			
    6. 
						
  6. Confluence 6 发送 Confluence 通知到其他 Confluence 服务器
			
    你可以配置 Confluence 服务器向其他的 Confluence 服务器发送消息.在这种情况下,Confluence 服务器将不会显示 workbox. 希望发送消息到其他 Confluence ...
    
			
    7. 
						
  7. 【DOS】文件统计命令
			
    1. 统计当前文件夹下文件的个数 ls -l|grep "^-"|wc -l 2. 统计当前文件夹下目录的个数 ls -l|grep "^d"|wc -l 3. ...
    
			
    8. 
						
  8. 【Linux】系统基本命令
			
    # lsb_release -a 查看系统版本# uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cp ...
    
			
    9. 
						
  9. 在前台根据传过来的XX级别的数字转XX的名字
			
    需求描述:进入页面,展示列表,列表中有个XX级别的项,数据库中的级别使用1234来存放的,现在要转成对应的一级XX,二级XX,三级XX,四级XX. 吐槽一下:正常的做法应该是在后台,就把查出来的级别1 ...
    
			
    10. 
						
  10. laravel 迁移枚举
			
    $table->enum('type', ['replace', 'warning'])->comment('类型');
    
			
    11.