多級聯動代碼示例-數據爲數組

時間 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。