JS操作HTML的select标签，内容之间的添加，删除（http://terry-y.iteye.com/blog/178861）

浏览数：29 / 时间：2015年06月09日

2个select之间的移动，分单个移动和全部移动， 
具体情况如下： 

样式如下（类似而已，呵呵）： 

a　　　　　　　　　　　k 
b　　　　　>>　　　　　l 
c　　　　　　　　　　　m 
d　　　　　>　　　　　 
e 
f　　　　　<< 
g 
h　　　　　< 
i 

Html代码  
    1. <script language="javascript">  
    2. function add(){  
    3.     var opt=selectfrom.options;  
    4.     len=opt.length;  
    5.     for(i=len-1;i>-1;i--){  
    6.         if(opt[i].selected){  
    7.             select2.appendChild(opt[i]);  
    8.         }  
    9.     }  
    10. }  
    11.   
    12. function addAll(){  
    13.     var opt=selectfrom.options;  
    14.     len=opt.length;  
    15.     for(i=len-1;i>-1;i--){  
    16.         select2.appendChild(opt[i]);  
    17.     }  
    18. }  
    19.   
    20. function del(){  
    21.     var opt=select2.options;  
    22.     len=opt.length;  
    23.     for(i=len-1;i>-1;i--){  
    24.         if(opt[i].selected){  
    25.             selectfrom.appendChild(opt[i]);  
    26.         }  
    27.     }  
    28. }  
    29.   
    30. function delAll(){  
    31.     var opt=select2.options;  
    32.     len=opt.length;  
    33.     for(i=len-1;i>-1;i--){  
    34.         selectfrom.appendChild(opt[i]);  
    35.     }  
    36. }  
    37. </script>  
    38. <body>  
    39. <table width="27%" height="194" border="0" cellpadding="1" cellspacing="0">  
    40.   <tr>  
    41.     <td width="21%"><select id="selectfrom" size="15" multiple="multiple" style="width:100px">  
    42.       <option>a</option>  
    43.       <option>b</option>  
    44.       <option>c</option>  
    45.       <option>d</option>  
    46.       <option>e</option>  
    47.       <option>f</option>  
    48.       <option>g</option>  
    49.       <option>h</option>  
    50.       <option>i</option>  
    51.       <option>j</option>  
    52.       <option>k</option>  
    53.       <option>j</option>  
    54.       <option>m</option>  
    55.       <option>n</option>  
    56.                 </select></td>  
    57.     <td width="57%"><p align="center">  
    58.       <input name="addAll" type="button" id="addAll" value=" &gt;&gt; " style="width:40px" onclick="addAll()"/>  
    59.     </p>  
    60.     <p align="center">  
    61.       <input name="add" type="button" id="add" style="width:40px" value=" &gt; " onclick="add()"/>  
    62.     </p>  
    63.     <p align="center">  
    64.       <input name="del" type="button" id="del" value=" &lt; " style="width:40px" onclick="del()"/>  
    65.     </p>  
    66.     <p align="center">  
    67.       <input name="delAll" type="button" id="delAll" value=" &lt;&lt; " style="width:40px" onclick="delAll()"/>  
    68. </p></td>  
    69.     <td width="22%"><select id="select2" size="15" multiple="multiple" style="width:100px">  
    70.         </select></td>  
    71.   </tr>  
    72. </table>  

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 java src html com log http class style 代码 java src html com log http

相关文章

随机文章

您可能还喜欢

您可能还喜欢