支持多选的select

最新推荐文章于 2025-02-21 17:26:27 发布

最新推荐文章于 2025-02-21 17:26:27 发布 · 312 阅读

文章标签：

#支持多选的select

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文提供了一个使用HTML和JavaScript实现的多选下拉菜单示例，演示了如何通过按钮点击操作将选项从一个选择框移动到另一个选择框。

[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 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>[/code]