支持多选的select

最新推荐文章于 2021-08-10 10:10:13 发布

weiweichen

最新推荐文章于 2021-08-10 10:10:13 发布

阅读量282

点赞数

分类专栏： javascript 文章标签：支持多选的select

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[code]<html>
<head>
<title>支持多选的select</title>
</head>
</body>
全部添加与部分添加的实现：
<table border=0 cellpadding=0 cellspacing=0>
<form name=meizz>
<tr>
<td>
<select name=list1 size=8 multiple οndblclick="moveOption(this, this.form.list2)">
<option value=A>aaaaaaaaaa
<option value=B>bbbbbbbbbb
<option value=C>cccccccccc
<option value=D>dddddddddd
<option value=E>eeeeeeeeee
<option value=F>ffffffffff
<option value=G>gggggggggg
<option value=H>hhhhhhhhhh
</select>
</td>
<td width=40 align=center>
<input name=add type=button value=">>>" οnclick="moveOption(this.form.list1,this.form.list2)">
<br/><br/>
<input name=sub type=button value="<<<" οnclick="moveOption(this.form.list2,this.form.list1)">
</td><td>
<select name=list2 size=8 multiple οndblclick="moveOption(this, this.form.list1)"></select>
</td>
</tr>
</form>
</table>
<script language="javascript">
function moveOption(obj1, obj2){
//try{
var length=obj1.options.length-1;
for(i=0;i<=length;i++){
var e = obj1.options[obj1.selectedIndex];
obj2.options.add(new Option(e.text,e.value));
obj1.options.remove(obj1.selectedIndex);
}
//}catch(e){
// alert(e);
//}
}
</script>

</body>

</html>[/code]