javascript实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
select{
width:200px;
height:200px;
border:1px solid #ccc;
background-color:#23da7e;
font-size:18px;
}
</style>
</head>
<body>
<select id="left" multiple="multiple">
<option>橘子</option>
<option>苹果</option>
<option>西瓜</option>
<option>草莓</option>
<option>梨</option>
<option>香蕉</option>
</select>
<input type="button" value=">>" id="allToRight">
<input type="button" value="<<" id="allToLeft">
<input type="button" value=">" id="toRight">
<input type="button" value="<" id="toLeft">
<select id="right" multiple="multiple"></select>
</body>
<script>
//按钮
var allToRight = document.getElementById('allToRight');
var allToLeft = document.getElementById('allToLeft');
var toRight = document.getElementById('toRight');
var toLeft = document.getElementById('toLeft');
//左选框
var left = document.getElementById('left');
//右选框
var right = document.getElementById('right');
//option选项
var options = document.querySelectorAll('option');
//全部右移
allToRight.onclick = function(){
moveAll(left,right);
}
//全部左移
allToLeft.onclick = function(){
moveAll(right,left);
}
//部分右移
toRight.onclick = function(){
move(right);
}
//部分右移
toLeft.onclick = function(){
move(left);
}
//全部移动
function moveAll(start,end){
for(var i=0,len=start.children.length;i<len;i++){
end.appendChild(start.children[0]);
}
}
//部分移动
function move(end){
var i=0,len=options.length;
for(;i<len;i++){
if(options[i].selected){
end.appendChild(options[i])
}
}
}
</script>
</html>效果：
jQuery实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
select{
width:200px;
height:200px;
border:1px solid #ccc;
background-color:#23da7e;
font-size:18px;
}
</style>
</head>
<body>
<h1>城市选择：</h1>
<select id="left" multiple="multiple">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
<option>济南</option>
<option>青岛</option>
</select>
<input type="button" value=">>" id="allToRight" title="全部右移">
<input type="button" value="<<" id="allToLeft" title="全部左移">
<input type="button" value=">" id="toRight" title="部分右移">
<input type="button" value="<" id="toLeft" title="部分右移">
<select id="right" multiple="multiple"></select>
</body>
<script src="../jQuery/jquery.js"></script>
<script>
$(function(){
//全部右移
$('#allToRight').click(function(){
// $('#right').append($('#left').children('option'));
$('#left>option').appendTo("#right");
});
//全部左移
$('#allToLeft').click(function(){
// $('#left').append($('#right').children('option'));
$('#right>option').appendTo("#left");
});
//部分右移
$('#toRight').click(function(){
$('#right').append($('option:selected'));
});
//部分左移
$('#toLeft').click(function(){
$('#left').append($('option:selected'));
});
});
</script>
</html>
