科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网›软件频道 ›Javascript 单数组实现列表框两级联动三级联动 By shawl.qiu

Javascript 单数组实现列表框两级联动三级联动 By shawl.qiu

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

Javascript 单数组实现列表框两级联动三级联动 By shawl.qiu 摘要: 本文演示了使用一个 Javascript 数组 实现表单域列表框的联动显示. 注:

作者：btbtd 来源：CSDN 2008年3月17日

关键字： 列表框 JavaScript java

  • 评论
  • 分享微博
  • 分享邮件
摘要:
本文演示了使用一个 Javascript 数组 实现表单域列表框的联动显示. 
注: 数组内容由ASP生成

说明:
其实可以再N级联动, 不过那样效率得不到保障.
二级联动, 大类10, 每子类10, 数组数就是 10*10=100
三级就是 10*10*10=1000 数组
四级...
那样会让客户端浏览器CPU占用100%. 

目录:
1. 两级联动
2. 三级联动


1. 两级联动
    linenum
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns=" http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.     var ar=new Array()
  10. <%
  11.     dim i, i_
  12.     dim arNum:arNum=0
  13.     dim cat, cat1
  14.     for i=0 to 9
  15.         for i_=0 to 9
  16.             if i_=0 then cat="父类别"&i else cat=null
  17.             cat1="父类别"&i&" 子类别:"&i_
  18.             response.write "ar["&arNum&"]=new Array('"&i&"','"&cat&"','"&i_&"','"&cat1&"')"&chr(13)
  19.             arNum=arNum+1
  20.         next
  21.     next
  22. %>
  23.     function showCat(){
  24.         var catItem=0
  25.         var cat1Item=0
  26.         var i
  27.             document.all.cat.length=0
  28.         for(i=0; i < ar.length;i++){
  29.             if (ar[i][1]!==""){
  30.                 document.all.cat.options[catItem]=new Option(ar[i][1],ar[i][0])
  31.                 catItem++
  32.             }
  33.             if(ar[i][0]==0){
  34.                 document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
  35.                 cat1Item++
  36.             }
  37.         } //shawl.qiu script
  38.     }
  39.     window.onload=showCat;
  40.     
  41.     function catChg(){
  42.         var cat1Item=0
  43.         var catSleVal=document.all.cat.value
  44.             document.all.cat1.length=0
  45.             
  46.         for (i=0;i<ar.length;i++){
  47.             if(ar[i][0]==catSleVal){
  48.                 document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
  49.                 cat1Item++
  50.             }
  51.         }//shawl.qiu script
  52.     }
  53. //]]>
  54. </script>
  55. </head>
  57. <body>
  58. <form action="" method="post" name="ubbForm" id="ubbForm">
  59.   <select name="cat" id="cat" onchange="catChg()">
  60.   </select>
  61.   <select name="cat1" id="cat1">
  62.   </select>  
  63.   <br />
  64. </form>
  65. </body>
  66. </html>

2. 三级联动
    linenum
  1. <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns=" http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Untitled Document</title>
  7. <script type="text/javascript">
  8. //<![CDATA[
  9.     var ar=new Array()
  10. <%
  11.     dim i, i_, i__
  12.     dim arNum:arNum=0
  13.     dim cat, cat1, cat2
  14.     for i=0 to 9
  15.         for i_=0 to 9
  16.             for i__=0 to 9
  17.                     if i_=0 and i__=0 then cat="类别"&i else cat=null
  18.                     if i__=0 then cat1="类别"&i&" 类别1: "&i_ else cat1=null
  19.                         cat2="类别"&i&" 类别1 "&i_&" 类别2: "&i__
  20.                         
  21.                     response.write "ar["&arNum&"]=new Array('"&i&i&"','"&cat&"','"&i_&i_&"','"&cat1&"','"&i__&i__&"','"&cat2&"')"&chr(13)
  22.                     arNum=arNum+1
  23.             next
  24.         next
  25.     next
  26. %>
  27.     function showCat(){
  28.         var catItem=0
  29.         var cat1Item=0
  30.         var cat2Item=0
  31.         var i
  32.             document.all.cat.length=0
  33.             document.all.cat1.length=0
  34.             document.all.cat2.length=0
  35.         for(i=0; i < ar.length;i++){
  36.             if (ar[i][1]!==""){
  37.                 document.all.cat.options[catItem]=new Option(ar[i][1],ar[i][0])
  38.                 catItem++
  39.             }
  40.             if((ar[i][0]==0)&&(ar[i][3]!=="")){
  41.                 document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
  42.                 cat1Item++
  43.             }
  44.             if((ar[i][0]==0)&&(ar[i][2]==0)){
  45.                 document.all.cat2.options[cat2Item]=new Option(ar[i][5],ar[i][4])
  46.                 cat2Item++
  47.             }
  48.         } //shawl.qiu script
  49.     }
  50.     window.onload=showCat;
  51.     
  52.     function catChg(chgLevel){
  53.         var cat1Item=0
  54.         var cat2Item=0
  55.         var catSleVal=document.all.cat.value
  56.         var cat1SleVal=document.all.cat1.value
  57.         
  58.         if (chgLevel==0){ document.all.cat1.length=0 }
  59.             document.all.cat2.length=0
  60.         for (i=0;i<ar.length;i++){
  61.             if (chgLevel==0){
  62.                 if((ar[i][0]==catSleVal)&&(ar[i][3]!=="")){
  63.                     document.all.cat1.options[cat1Item]=new Option(ar[i][3],ar[i][2])
  64.                     cat1Item++
  65.                 }
  66.                 if((ar[i][0]==catSleVal)&&(ar[i][4]==0)){
  67.                     document.all.cat2.options[cat2Item]=new Option(ar[i][5],ar[i][4])
  68.                     cat2Item++
  69.                 }
  70.             } else if (chgLevel==1){
  71.                 if((ar[i][0]==catSleVal)&&(ar[i][2]==cat1SleVal)){
  72.                     document.all.cat2.options[cat2Item]=new Option(ar[i][5],ar[i][4])
  73.                     cat2Item++
  74.                 }
  75.             } //shawl.qiu script
  76.         } 
  77.     }
  78. //]]>
  79. </script>
  80. </head>
  82. <body>
  83. <form action="" method="post" name="ubbForm" id="ubbForm">
  84.   <select name="cat" id="cat" onchange="catChg(0)">
  85.   </select>
  86.   <select name="cat1" id="cat1" onchange="catChg(1)">
  87.   </select>  
  88.   <select name="cat2" id="cat2">
  89.   </select>  
  90.   <br />
  91. </form>
  92. </body>
  93. </html>

    • 评论
    • 分享微博
    • 分享邮件
    VIP专区
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息，那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章

    业界热点:

    北京第二十六维信息技术有限公司（至顶网）版权所有. 京ICP备15039648号-7 京ICP证161336号 京公网安备 11010802021500号