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

时间：2014-11-10 11:32:00 阅读：285 评论：0 收藏：0 [点我收藏+]

标签：style blog http io ar java sp for div

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

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

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

Html代码

<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>

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

标签：style blog http io ar java sp for div

原文地址：http://www.cnblogs.com/sdj89/p/4086581.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行