JavaScript 对两个select 元素进行操作,移动其中的选项-优快云博客

本文介绍了一个简单的网页示例，通过JavaScript实现两个下拉选择框之间的选项移动功能。当用户选择左侧或右侧的选择框中的某个选项并点击相应的按钮时，所选选项会从一个选择框移动到另一个选择框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>对两个SELECT元素进行操作</title>
<script language="javascript" type="text/javascript">
function ToRight()
{
var rightSelect = document.getElementById("right");
var leftSelect = document.getElementById("left");
OptionMove(leftSelect,rightSelect);
}
function ToLeft()
{

var rightSelect = document.getElementById("right");
var leftSelect = document.getElementById("left");
OptionMove(rightSelect,leftSelect);
}
function OptionMove(source,target)
{
if(source.length==0 || source.selectedIndex==-1)
{
return;
}
var index = source.selectedIndex;
var temp = source.options(index);
target.add(new Option(temp.text,temp.value))
source.remove(index);

if(source.length>=index+1)
{
source.selectedIndex=index;
}
else
{
source.selectedIndex=index-1;
}

target.selectedIndex=target.length-1;
}
</script>
</head>
<body>
<div style="float: left;">
<select id="left" size="2" style="width: 121px; height: 184px;">
<option value="左1">左1</option>
<option value="左2">左2</option>
<option value="左3">左3</option>
</select>
</div>
<div style="float: left;">
<div>
<input type="button" id="btnRight" value=">>" onclick="ToRight()" />
</div>
<div>
<input type="button" id="btnLeft" value="<<" onclick="ToLeft()" />
</div>
</div>
<div style="float: left;">
<select id="right" size="2" style="width: 121px; height: 184px;">
<option value="右1">右1</option>
<option value="右2">右2</option>
<option value="右3">右3</option>
</select>
</div>
</body>
</html>