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
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.onload=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" onchange="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.onload=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" onchange="catChg(0)">
</select>
<select name="cat1" id="cat1" onchange="catChg(1)">
</select>
<select name="cat2" id="cat2">
</select>
<br />
</form>
</body>
</html>
