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

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

2024-08-01 06:28:28   219人阅读

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=http://www.mamicode.com/" &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=http://www.mamicode.com/" &gt; " onclick="add()"/>  
    62.     </p>  
    63.     <p align="center">  
    64.       <input name="del" type="button" id="del" value=http://www.mamicode.com/" &lt; " style="width:40px" onclick="del()"/>  
    65.     </p>  
    66.     <p align="center">  
    67.       <input name="delAll" type="button" id="delAll" value=http://www.mamicode.com/" &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>  

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


联系
我们