本文介绍如何使用JavaScript实现Select下拉列表的双向移动功能。通过监听按钮点击事件，利用DOM操作将左侧选项移动至右侧或反之，支持单项与全选移动。代码包含HTML结构、CSS布局及JS逻辑，适合前端初学者参考学习。
JavaScript实现Select选项左右移动功能
利用JavaScript编写代码，实现如下交互效果：初始界面如截图所示，当选中左侧Select列表中的若干选项后，点击“-->”按钮，这些被选中的选项将移动至右侧列表框内，同时从左侧列表中移除。若点击“====>”按钮，则左侧所有选项将一次性全部移动至右侧。反之，若在右侧列表中选中部分选项后点击“<---”，这些选项将移动回左侧列表；若点击“<====”，则右侧所有选项将一次性全部移动回左侧。具体实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box_L,#choice,#box_R{
display: inline-block;
}
</style>
</head>
<body>
<div id="box_L">
<select id="left" multiple size="10">
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
<option>six</option>
</select>
</div>
<div id="choice">
<input type="button" width="5px" value="--->" onclick="add()"><br>
<input type="button" width="5px" value="====>" onclick="addall()"><br>
<input type="butoon" width="5px" value="<---" onclick="sub()"><br>
<input type="butoon" width="5px" value="<====" onclick="suball()"><br>
</div>
<div id="box_R">
<select id="right" size="10" multiple>
<option>seven</option>
</select>
</div>
<script>
var left=document.getElementById("left");
var right=document.getElementById("right");
function add(){
var options=left.children;
for (var i=0;i<options.length;i++){
if (options[i].selected==true){
options[i].selected=false;
right.appendChild(options[i]);
i--;
}
}
}
function addall(){
var options=left.children;
for (var i=0;i<options.length;i++){
right.appendChild(options[i]);
i--;
}
}
function sub(){
var options=right.children;
for (var i=0;i<options.length;i++){
if (options[i].selected==true){
options[i].selected=false;
left.appendChild(options[i]);
i--;
}
}
}
function suball(){
var options=right.children;
for (var i=0;i<options.length;i++){
left.appendChild(options[i]);
i--;
}
}
</script>
</body>
</html>运行结果如下图所示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。