anqli

博客园 首页 新随笔 联系 订阅 管理
JavaScript实现下拉列表的级联 
  1 <HTML>
  2 <HEAD>
  3 <TITLE> New Document </TITLE>
  4 <META NAME=Generator CONTENT=EditPlus>
  5 <META NAME=Author CONTENT=>
  6 <META NAME=Keywords CONTENT=>
  7 <META NAME=Description CONTENT=>
  8 <style type=text/css>
  9 body{font-family:Courier New, Courier}
 10 select{font-size:8pt;font-family:Courier New, Courier}
 11 input{font-size:8pt;font-family:Courier New, Courier}
 12 </style>
 13 <SCRIPT LANGUAGE=JavaScript>
 14 <!--
 15 var Name=new Array(3);
 16 var Value=new Array(3);
 17 Name[1]=new Array(Zosatapo1,Zosatapo2,Zosatapo3,Zosatapo4);
 18 Name[2]=new Array(Reic Yang1,Reic Yang2,Reic Yang3,Reic Yang4);
 19 
 20 function change()
 21 {
 22 selIndex=document.all(test).selectedIndex;
 23 if(document.all(test).selectedIndex==0)
 24  return;
 25 
 26 for(i=document.all(test).options.length-1;i>-1;i--)
 27 {
 28  document.all(test).options.remove(i);
 29 }
 30 
 31  
 32 
 33 for(i=0;i<Name[selIndex].length;i++)
 34 {
 35 document.all(test).options.add(new Option(Name[selIndex][i],name+i));
 36 }
 37 
 38 }
 39 
 40 function changeEx(){
 41 
 42 
 43 for(i=document.all(sub).options.length;i>0;i--)
 44 {
 45 document.all(sub).options.remove(i-1);
 46 }
 47 
 48 
 49 if(document.all(main).selectedIndex==0){
 50 document.all(sub).options.add(new Option(==========,-1));
 51 return;}
 52 
 53 
 54 selIndex=document.all(main).selectedIndex;
 55 
 56 for(i=0;i<Name[selIndex].length;i++)
 57 {
 58 document.all(sub).options.add(new Option(Name[selIndex][i],name+i));
 59 }
 60 
 61 }
 62 
 63 function reset(){
 64 for(i=document.all(test).options.length-1;i>-1;i--)
 65 {
 66  document.all(test).options.remove(i);
 67 }
 68 
 69 document.all(test).options.add(new Option(==========,-1));
 70 
 71 document.all(test).options.add(new Option(Zosatapo,1));
 72 
 73 document.all(test).options.add(new Option(Reic Yang,2));
 74 
 75 }
 76 
 77 function display(object){
 78 alert(object.options[object.selectedIndex].text+ +object.options[object.selectedIndex].value);
 79 }
 80 //-->
 81 </SCRIPT>
 82 </HEAD>
 83 
 84 <BODY BGCOLOR=#FFFFFF>
 85 First Sample:<br><font color=blue>All items will change After you Selected!</font><br>
 86 <SELECT id=test  onchange=change();>
 87 <option value=-1  selected>==========
 88 <option  value=1>Zosatapo
 89 <option  value=2>Reic Yang
 90 </SELECT><input name=Reset Select type=button value=Reset Select onclick=reset(); ><br><br>
 91 
 92 Second Sample:<br><font color=blue>You selected Item in Main Select will change the Sub select Content!</font><br>
 93 Main Select:<SELECT id=main  onchange=changeEx();>
 94 <option value=-1  selected>==========
 95 <option  value=1>Zosatapo
 96 <option  value=2>Reic Yang
 97 </SELECT>
 98 
 99 Sub Select:<SELECT id=sub onchange=display(this);>
100 <option value=-1  selected>==========
101 </SELECT><br><br>
102 </BODY>
103 </HTML>
104 
105  
106  
107 [code]

 

posted on 2013-01-07 12:57  anqli  阅读(82)  评论(0)    收藏  举报