最终实现的效果如下图所示：
代码如下所示：
HTML代码部分：
<body>
<div class="page" style="overflow: hidden">
<div class="one">所选课程
<select size =10 name="" id="left">
<option value="">javascript</option>
<option value="">html5</option>
<option value="">css3</option>
<option value="">jquery</option>
<option value="">angular</option>
<option value="">javascript</option>
<option value="">html5</option>
<option value="">css3</option>
<option value="">jquery</option>
<option value="">angular</option>
<option value="">javascript</option>
<option value="">html5</option>
<option value="">css3</option>
<option value="">jquery</option>
<option value="">angular</option>
<option value="">javascript</option>
<option value="">html5</option>
<option value="">css3</option>
<option value="">jquery</option>
<option value="">angular</option>
</select>
</div>
<div class="one"><br><br>
<button id="rightBtn">右移一项</button>
<button id="allRightBtn">全部右移</button>
<button id="leftBtn">左移一项</button>
<button id="allLeftBtn">全部左移</button>
</div>
<div class="one">
<select size =10 name="" id="right">
<option value="">web</option>
<option value="">前端</option>
<option value="">后端</option>
<option value="">java</option>
</select>
</div>
</div>
</body>
CSS代码部分：
<style>
select{
width: 200px; }
.one{
float: left;
}
button{
display: block;
}
</style>
Javascript代码部分：
<script>
var left = document.getElementById("left");
var right = document.getElementById("right");
var rightBtn = document.getElementById("rightBtn");
var leftBtn = document.getElementById("leftBtn");
var allRightBtn = document.getElementById("allRightBtn");
var allLeftBtn = document.getElementById("allLeftBtn");
rightBtn.onclick = function(){
right.appendChild(left[left.selectedIndex])
}; allRightBtn.onclick = function(){
var len = left.length;
for(var i= 0;i<len;++i){
right.appendChild(left[0])
}
}; leftBtn.onclick = function(){
left.appendChild(right[right.selectedIndex])
}; allLeftBtn.onclick = function(){
var len = right.length;
for(var i= 0;i<len;++i){
left.appendChild(right[0])
}
} </script>
供友友们参考。