<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select id="leftBox" multiple="multiple" style="height: 200px; 100px;"> <option value="1">a</option> <option value="2">b</option> <option value="3">c</option> <option value="4">d</option> </select> <input type="button" value=">" onclick="move('leftBox','rightBox')"/> <input type="button" value="<" onclick="move('rightBox','leftBox')"/> <!--<input type="button" value=">>" onclick="moveAll('leftBox','rightBox')"/> <input type="button" value="<<" onclick="moveAll('rightBox','leftBox')"/> --> <select id="rightBox" multiple="multiple" style="height: 200px; 100px;"> <option value="11">A</option> <option value="22">B</option> <option value="33">C</option> <option value="44">D</option> </select> </body> </html> <script type="text/javascript"> // 移動id為from的列表中的選中項到id為to的列表中 function move(from,to) { // 獲取移動源 var fromBox = document.getElementById(from); // 獲取移動目的地 var toBox = document.getElementById(to); // 當移動源存在選中項時 while(fromBox.selectedIndex != -1){ // 將移動源中的選中項添加到移動目的地的末尾 toBox.appendChild(fromBox.options[fromBox.selectedIndex]); } } </script>