<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>左右移动</title>
<meta charset="UTF-8">
<style>
#box_l,#choice,#box_r{
display:inline-block;
}
#choice{
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div id="box_l">
<select id="left" multiple size="10">
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<option>选项四</option>
<option>选项五</option>
<option>选项六</option>
</select>
</div>
<div id="choice">
<input type="button" value="----->" onclick="add()"><br>
<input type="button" value="=====>" onclick="addall()"><br>
<input type="button" value="<-----" ><br>
<input type="button" value="<=====">
</div>
<div id="box_r">
<select multiple size="10" id="right">
<option>选项七</option>
</select>
</div>
<script>
var right=document.getElementById(‘right‘);
var left=document.getElementById(‘left‘);
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--;
}
}
</script>
</body>
</html>
左右移动案例