<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script>
function run1(){
$('#left option:selected').appendTo('#right');
}
function run2(){
$('#left option').appendTo("#right");
}
function run3(){
$('#right option:selected').appendTo('#left');
}
function run4(){
$('#right option').appendTo("#left");
}
</script>
</head>
<body>
<select id="left" multiple="multiple" style="width:100px;height:100px">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<input type="button" value=" > " onclick="run1()"/>
<input type="button" value=" >> " onclick="run2()"/>
<input type="button" value=" < " onclick="run3()"/>
<input type="button" value=" << " onclick="run4()"/>
<select id="right" multiple="multiple" style="width:100px;height:100px">
</select>
</body>
</html>