具体实现的源码如下：

两个框的页面源码：

已选角色：<br /> <select multiple="multiple" name="roleIds" size="10" id="roleIds"> <option value="1"> 主任 </option> <option value="2"> 医师 </option><option value="3"> 护士 </option><option value="4"> 前台 </option><option value="5"> 内勤 </option> </select> <input type="button" value="<<-添加" onclick="moveOptions(document.getElementById('roleList'),document.getElementById('roleIds'));" /> <input type="button" value="移除->>" class="btn1" onclick="moveOptions(document.getElementById('roleIds'),document.getElementById('roleList'));" /> <br/> 备选角色：<br /> <select multiple="multiple" size="10" id="roleList"> <option value="6"> 工程师1 </option><option value="7"> 工程师2 </option><option value="8"> 工程师3 </option><option value="9"> 工程师4 </option><option value="10"> 工程师5 </option><option value="11"> 工程师6 </option> </select>