一个下拉列表框到另一个下拉列表框

  1. <html>
  2. <head>
  3. <META content="text/html; charset=gb2312" http-equiv=Content-Type>
  4. <link rel="stylesheet" href="common.css">
  5. </head>
  6. <body bgColor=skyblue>
  7. <form action="select.htm" method="post" name="myform">
  8. <br><br><br>
  9. <div align="center"><center><left>    
  10. <table style="FONT-SIZE: smaller">
  11.   <tr><td>
  12.    <table>
  13.    <tr><td>
  14.    <select name="left_select" style="HEIGHT: 200px; WIDTH: 100px" multiple>
  15.            <OPTION VALUE="A">A</OPTION><OPTION VALUE="B">B</OPTION>
  16.            <OPTION VALUE="C">C</OPTION><OPTION VALUE="D">D</OPTION>
  17.            <OPTION VALUE="E">E</OPTION><OPTION VALUE="F">F</OPTION>
  18.            <OPTION VALUE="G">G</OPTION><OPTION VALUE="H">H</OPTION>
  19.            <OPTION VALUE="I">I</OPTION><OPTION VALUE="J">J</OPTION>
  20.            <OPTION VALUE="K">K</OPTION><OPTION VALUE="L">L</OPTION>
  21.            <OPTION VALUE="M">M</OPTION><OPTION VALUE="N">N</OPTION>
  22.            <OPTION VALUE="O">O</OPTION><OPTION VALUE="P">P</OPTION>
  23.    </select>
  24.    </td></tr>
  25.    </table>
  26.    </td><td>
  27.    <table border="0">
  28.    
  29.    <br>
  30.    <tr><td>
  31.    <INPUT language="javascript" name="btn_select_addany" onclick="fun_select_addany(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title="Add any" type=button value="8"></td></tr><tr><td>
  32.    <INPUT language="javascript" name="btn_select_addall" onclick="fun_select_addall(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title="Add all" type=button value=: DESIGNTIMESP="17713"></td></tr><tr><td>
  33.    <br><br></td></tr><tr><td>
  34.    <INPUT language="javascript" name="btn_select_dltany" onclick="fun_select_dltany(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title ="delete any" type=button value="7"></td></tr><tr><td>
  35.    <INPUT language="javascript" name="btn_select_dltall" onclick="fun_select_dltall(document.myform)" style="COLOR: blue; FONT-FAMILY: Webdings; FONT-SIZE: 12pt; FONT-WEIGHT: normal; HEIGHT: 28px; WIDTH: 27px" title ="delete all" type=button value="9"></td></tr>
  36.    <tr><td></td></tr>
  37.    <tr><td>
  38.    </td></tr>
  39.    </table></TD><td>   
  40.    <table style="FONT-SIZE: smaller">
  41.    <tr><td>
  42.    <select name="right_select" style="HEIGHT: 200px; WIDTH: 100px" multiple>
  43.    </select>
  44.    </td></tr>
  45.    </table>
  46.    </td></TR></TBODY></TABLE></div></CENTER>
  47. </form>   
  48. </body>
  49. </html>
  50.           
  51. <script language="javascript">
  52. function fun_select_addany(theform){
  53.     var i; 
  54.     for (i=0;i<theform.left_select.length;i++){
  55.         if (theform.left_select.options[i].selected == true){
  56.            theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);
  57.            theform.left_select.options.remove(i);
  58.            i--;
  59.         } 
  60.     }
  61.     sort_select(document.myform);
  62. function fun_select_addall(theform){
  63.     var i;   
  64.     for (i=0;i<theform.left_select.length;i++){
  65.         theform.right_select.options[theform.right_select.length]=new Option(theform.left_select.options[i].text);    
  66.     }
  67.     theform.left_select.length=0;     
  68.     sort_select(document.myform); 
  69. }  
  70. function fun_select_dltany(theform){
  71.    var i; 
  72.    for (i=0;i<theform.right_select.length;i++){
  73.        if (theform.right_select.options[i].selected == true){
  74.           theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);
  75.           theform.right_select.options[i] =new Option("");
  76.           theform.right_select.options.remove(i);
  77.           i--;
  78.        } 
  79.    }
  80.    sort_select(document.myform);
  81. }
  82. function fun_select_dltall(theform){
  83.     var i;   
  84.     for (i=0;i<theform.right_select.length;i++){
  85.         theform.left_select.options[theform.left_select.length]=new Option(theform.right_select.options[i].text);
  86.     }
  87.     theform.right_select.length=0;            
  88.     sort_select(document.myform);
  89. }
  90. function sort_select(theform){
  91.     var i; 
  92.     var left_arraynew Array();
  93.     var right_array = new Array();                    
  94.     for (i=0;i<theform.left_select.length;i++){
  95.         left_array[i] = new Array(theform.left_select.options[i].text);
  96.     }
  97.     for (i=0;i<theform.right_select.length;i++){
  98.         right_array[i] = new Array(theform.right_select.options[i].text);
  99.     }
  100. left_array.sort();
  101.     right_array.sort();
  102.     theform.left_select.length=0;
  103.     theform.right_select.length=0;            
  104.     
  105.     for (i=0;i<left_array.length;i++){
  106.         theform.left_select.options[theform.left_select.length]=new Option(left_array[i]);
  107.     }
  108.     for (i=0;i<right_array.length;i++){
  109.         theform.right_select.options[theform.right_select.length]=new Option(right_array[i]);
  110.     }
  111.     left_arraynew Array();
  112.     right_array = new Array();      
  113. }   
  114. </script>

你可能感兴趣的:(一个下拉列表框到另一个下拉列表框)