weiweichen1985

永久域名 http://weiweichen1985.javaeye.com

2007-10-26

支持多选的select

关键字: 支持多选的select

<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 ondblclick="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=">>>" onclick="moveOption(this.form.list1,this.form.list2)">
<br/><br/>
<input name=sub type=button value="<<<" onclick="moveOption(this.form.list2,this.form.list1)">
</td><td>
<select name=list2 size=8 multiple ondblclick="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>