<style type="text/css">
select{ width: 400px; height: 400px;}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").eq(0).click(function(){
$("#s2").append($("#s1 option:selected"));
});
$("button").eq(1).click(function(){
$("#s1").append($("#s2 option:selected"));
});
$("button").eq(3).click(function(){
$("#s2").append($("#s1 option"));
});
$("button").eq(2).click(function(){
$("#s1").append($("#s2 option"));
});
});
</script>
<body>
<select multiple="" id="s1">
<option>香蕉</option>
<option>苹果</option>
<option>梨</option>
</select>
<button>></button>
<button><</button>
<button><<<<<<<<</button>
<button>>>>>></button>
<select multiple="" id="s2"></select>
</body>
select{ width: 400px; height: 400px;}
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button").eq(0).click(function(){
$("#s2").append($("#s1 option:selected"));
});
$("button").eq(1).click(function(){
$("#s1").append($("#s2 option:selected"));
});
$("button").eq(3).click(function(){
$("#s2").append($("#s1 option"));
});
$("button").eq(2).click(function(){
$("#s1").append($("#s2 option"));
});
});
</script>
<body>
<select multiple="" id="s1">
<option>香蕉</option>
<option>苹果</option>
<option>梨</option>
</select>
<button>></button>
<button><</button>
<button><<<<<<<<</button>
<button>>>>>></button>
<select multiple="" id="s2"></select>
</body>