Javascript 单数组实现列表框两级联动三级联动 By shawl.qiu
摘要:
本文演示了使用一个 Javascript 数组 实现表单域列表框的联动显示.
注: 数组内容由ASP生成
说明:
其实可以再N级联动, 不过那样效率得不到保障.
二级联动, 大类10, 每子类10, 数组数就是 10*10=100
三级就是 10*10*10=1000 数组
四级...
那样会让客户端浏览器CPU占用100%.
目录:
1. 两级联动
2. 三级联动
shawl.qiu
2006-10-08
http://blog.csdn.net/btbtd
1. 两级联动
- linenum
- <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns=" http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Untitled Document</title>
- <script type="text/javascript">
- //<![CDATA[
- var ar=new Array()
- <%
- dim i, i_
- dim arNum:arNum=0
- dim cat, cat1
- for i=0 to 9
- for i_=0 to 9
- if i_=0 then cat="父类别"&i else cat=null
- cat1="父类别"&i&" 子类别:"&i_
- response.write "ar["&arNum&"]=new Array('"&i&"','"&cat&"','"&i_&"','"&cat1&"')"&chr(13)
- arNum=arNum+1
- next
- next
- %>
- function showCat(){
- var catItem=0
- var cat1Item=0
- var i
- document.all.cat.length=0
- for(i=0; i < ar.length;i++){
- if (ar[i][1]!==""){
- document.all.cat.options[catItem]=new Option(ar[i][1],ar[i][0])
- catItem++
- }
- if(ar[i][0]==0){
- document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
- cat1Item++
- }
- } //shawl.qiu script
- }
- window.οnlοad=showCat;
- function catChg(){
- var cat1Item=0
- var catSleVal=document.all.cat.value
- document.all.cat1.length=0
- for (i=0;i<ar.length;i++){
- if(ar[i][0]==catSleVal){
- document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
- cat1Item++
- }
- }//shawl.qiu script
- }
- //]]>
- </script>
- </head>
- <body>
- <form action="" method="post" name="ubbForm" id="ubbForm">
- <select name="cat" id="cat" οnchange="catChg()">
- </select>
- <select name="cat1" id="cat1">
- </select>
- <br />
- </form>
- </body>
- </html>
2. 三级联动
- linenum
- <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns=" http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Untitled Document</title>
- <script type="text/javascript">
- //<![CDATA[
- var ar=new Array()
- <%
- dim i, i_, i__
- dim arNum:arNum=0
- dim cat, cat1, cat2
- for i=0 to 9
- for i_=0 to 9
- for i__=0 to 9
- if i_=0 and i__=0 then cat="类别"&i else cat=null
- if i__=0 then cat1="类别"&i&" 类别1: "&i_ else cat1=null
- cat2="类别"&i&" 类别1 "&i_&" 类别2: "&i__
- response.write "ar["&arNum&"]=new Array('"&i&i&"','"&cat&"','"&i_&i_&"','"&cat1&"','"&i__&i__&"','"&cat2&"')"&chr(13)
- arNum=arNum+1
- next
- next
- next
- %>
- function showCat(){
- var catItem=0
- var cat1Item=0
- var cat2Item=0
- var i
- document.all.cat.length=0
- document.all.cat1.length=0
- document.all.cat2.length=0
- for(i=0; i < ar.length;i++){
- if (ar[i][1]!==""){
- document.all.cat.options[catItem]=new Option(ar[i][1],ar[i][0])
- catItem++
- }
- if((ar[i][0]==0)&&(ar[i][3]!=="")){
- document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
- cat1Item++
- }
- if((ar[i][0]==0)&&(ar[i][2]==0)){
- document.all.cat2.options[cat2Item]=new Option(ar[i][5],ar[i][4])
- cat2Item++
- }
- } //shawl.qiu script
- }
- window.οnlοad=showCat;
- function catChg(chgLevel){
- var cat1Item=0
- var cat2Item=0
- var catSleVal=document.all.cat.value
- var cat1SleVal=document.all.cat1.value
- if (chgLevel==0){ document.all.cat1.length=0 }
- document.all.cat2.length=0
- for (i=0;i<ar.length;i++){
- if (chgLevel==0){
- if((ar[i][0]==catSleVal)&&(ar[i][3]!=="")){
- document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
- cat1Item++
- }
- if((ar[i][0]==catSleVal)&&(ar[i][4]==0)){
- document.all.cat2.options[cat2Item]=new Option(ar[i][5],ar[i][4])
- cat2Item++
- }
- } else if (chgLevel==1){
- if((ar[i][0]==catSleVal)&&(ar[i][2]==cat1SleVal)){
- document.all.cat2.options[cat2Item]=new Option(ar[i][5],ar[i][4])
- cat2Item++
- }
- } //shawl.qiu script
- }
- }
- //]]>
- </script>
- </head>
- <body>
- <form action="" method="post" name="ubbForm" id="ubbForm">
- <select name="cat" id="cat" οnchange="catChg(0)">
- </select>
- <select name="cat1" id="cat1" οnchange="catChg(1)">
- </select>
- <select name="cat2" id="cat2">
- </select>
- <br />
- </form>
- </body>
- </html>