多级联动代码示例-数据为数组

时间 2019-11-16
标签多级联动代码示例数据数组繁體版
原文原文链接
001 	<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
002 	 
003 	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
004 	<html>
005 	    <head>
006 	        <title>省市县三级联动01</title>
007 	         
008 	        <meta http-equiv="pragma" content="no-cache">
009 	        <meta http-equiv="cache-control" content="no-cache">
010 	        <meta http-equiv="expires" content="0">   
011 	        <!--
012 	        <link rel="stylesheet" type="text/css" href="styles.css">
013 	        -->
014 	        <script language="JavaScript" type="text/javascript">
015 	        //ChangeSelect(上一级的值,下一级Select控件的ID值,下一级Select控件要选中的值(即value而非text),数据源数组名, //默认显示字符(如:请选择...若是不写的话会用默认值填充))，第一级的上级值为0
016 	        function ChangeSelect(ParentValue, NextId, NextSelectedValue, ArrObj, DefaultStr) {
017 	            StrObj = eval(document.getElementById(NextId));
018 	            StrObj.length = 0;
019 	            //判断它是二级数据源，仍是三级
020 	            if (ArrObj.length > 0) {
021 	                if (ArrObj[0].length == 2) {
022 	                    ArrNum = 0;
023 	                } else {
024 	                    ArrNum = 2;
025 	                }
026 	            }
027 	            //显示全部列表
028 	            for (i = 0; i < ArrObj.length; i++) {
029 	                if (i == 0) {
030 	                    if (DefaultStr == undefined) {
031 	                        DefaultStr = "==\u8bf7\u9009\u62e9==";
032 	                    }
033 	                    StrObj.options[StrObj.length] = new Option(DefaultStr, "");
034 	                }
035 	                if (ArrObj[i][1] == ParentValue) {
036 	                    StrObj.options[StrObj.length] = new Option(ArrObj[i][0], ArrObj[i][ArrNum]);
037 	                }
038 	            }
039 	            //选中列表内某一项
040 	            for (i = 0; i < StrObj.length; i++) {
041 	                if (StrObj.options[i].value == NextSelectedValue) {
042 	                    StrObj.options[i].selected = true;
043 	                }
044 	            }
045 	            //激发下一级的onchange事件以实现多级级联
046 	            StrObj.onchange();
047 	        }
048 	        //公司二维数组数据源
049 	        Office = [
050 	            ["CategoryName","ParentCategoryName"],
051 	            ["业务部","0"],
052 	            ["技术部","0"],
053 	            ["市场部","0"],
054 	            ["业务部小柳","业务部"],
055 	            ["业务部小杨","业务部"],
056 	            ["业务部小菜","业务部"],
057 	            ["技术部老柳","技术部"],
058 	            ["技术部老杨","技术部"],
059 	            ["技术部老菜","技术部"],
060 	            ["市场部柳先生","市场部"],
061 	            ["市场部杨先生","市场部"],
062 	            ["市场部菜鸟","市场部"]
063 	        ]
064 	        //省市二维数组数据源
065 	        City2 = [
066 	            ["CategoryName","ParentCategoryName"],
067 	            ["山西省","0"],
068 	            ["河北省","0"],
069 	            ["太原市","山西省"],
070 	            ["运城市","山西省"],
071 	            ["石家庄","河北省"],
072 	            ["廊房","河北省"]
073 	        ]
074 	        //省市三维数组数据源
075 	        City3 = [
076 	            ["CategoryName","ParentId","Id"],
077 	            ["北京","0","010"],
078 	            ["山西","0","0359"],
079 	            ["朝阳区","010","001"],
080 	            ["海淀区","010","002"],
081 	            ["豆各庄","001","101"],
082 	            ["十里堡","001","102"],
083 	            ["中关村","002","201"],
084 	            ["上地","002","202"],
085 	            ["运城地区","0359","301"],
086 	            ["太原市","0359","302"],
087 	            ["永济市","301","311"],
088 	            ["小区","302","312"]
089 	        ]; 
090 	        </script>
091 	    </head>
092 	      
093 	    <body>
094 	        <select id="office1"  onchange="ChangeSelect(this.value,'office2','',Office,'==人员==')" style="width:100px"></select>
095 	        <select id="office2" onchange="" style="width:100px"></select>
096 	        <script language="JavaScript" type="text/javascript">ChangeSelect('0','office1','',Office,'==部门==') </script>
097 	        <br />
098 	         
099 	        <select id="City001"  onchange="ChangeSelect(this.value,'City002','',City2)" style="width:100px"></select>
100 	        <select id="City002" onchange="" style="width:100px"></select>
101 	        <script language="JavaScript" type="text/javascript">ChangeSelect('0','City001','',City2) </script>
102 	        <br />
103 	         
104 	        <select id="City3001"  onchange="ChangeSelect(this.value,'City3002','',City3)" style="width:100px"></select>
105 	        <select id="City3002"  onchange="ChangeSelect(this.value,'City3003','',City3)" style="width:100px"></select>
106 	        <select id="City3003" onchange="" style="width:100px"></select>
107 	        <script language="JavaScript" type="text/javascript">ChangeSelect('0','City3001','',City3) </script>
108 	        <br />
109 	    </body>
110 	</html>