JS操作HTML的select标签,内容之间的添加,删除(http://terry-y.iteye.com/blog/178861)
2个select之间的移动,分单个移动和全部移动,
具体情况如下:
样式如下(类似而已,呵呵):
a k
b >> l
c m
d >
e
f <<
g
h <
i
- <script language="javascript">
- function add(){
- var opt=selectfrom.options;
- len=opt.length;
- for(i=len-1;i>-1;i--){
- if(opt[i].selected){
- select2.appendChild(opt[i]);
- }
- }
- }
- function addAll(){
- var opt=selectfrom.options;
- len=opt.length;
- for(i=len-1;i>-1;i--){
- select2.appendChild(opt[i]);
- }
- }
- function del(){
- var opt=select2.options;
- len=opt.length;
- for(i=len-1;i>-1;i--){
- if(opt[i].selected){
- selectfrom.appendChild(opt[i]);
- }
- }
- }
- function delAll(){
- var opt=select2.options;
- len=opt.length;
- for(i=len-1;i>-1;i--){
- selectfrom.appendChild(opt[i]);
- }
- }
- </script>
- <body>
- <table width="27%" height="194" border="0" cellpadding="1" cellspacing="0">
- <tr>
- <td width="21%"><select id="selectfrom" size="15" multiple="multiple" style="width:100px">
- <option>a</option>
- <option>b</option>
- <option>c</option>
- <option>d</option>
- <option>e</option>
- <option>f</option>
- <option>g</option>
- <option>h</option>
- <option>i</option>
- <option>j</option>
- <option>k</option>
- <option>j</option>
- <option>m</option>
- <option>n</option>
- </select></td>
- <td width="57%"><p align="center">
- <input name="addAll" type="button" id="addAll" value=" >> " style="width:40px" onclick="addAll()"/>
- </p>
- <p align="center">
- <input name="add" type="button" id="add" style="width:40px" value=" > " onclick="add()"/>
- </p>
- <p align="center">
- <input name="del" type="button" id="del" value=" < " style="width:40px" onclick="del()"/>
- </p>
- <p align="center">
- <input name="delAll" type="button" id="delAll" value=" << " style="width:40px" onclick="delAll()"/>
- </p></td>
- <td width="22%"><select id="select2" size="15" multiple="multiple" style="width:100px">
- </select></td>
- </tr>
- </table>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。