<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>選擇項</title> <script> // 選中添加到右邊 function selectedToRight(){ // 獲取select2標簽 var select2 = document.getElementById("select2"); // 獲取select1標簽 var select1 = document.getElementById("select1"); // 獲取option var option1 = select1.getElementsByTagName("option"); // 遍歷 for (var i=0;i<option1.length;i++) { var optioni = option1[i]; //是否被選中 if(optioni.selected == true){ // 添加到select2里面 select2.appendChild(optioni); //數組長度發生變化，需要處理 i--; } } } // 選中添加到左邊 function selectedToLeft(){ // 獲取select2標簽 var select2 = document.getElementById("select2"); // 獲取select1標簽 var select1 = document.getElementById("select1"); // 獲取option var option2 = select2.getElementsByTagName("option"); // 遍歷 for (var i=0;i<option2.length;i++) { var optioni = option2[i]; //是否被選中 if(optioni.selected == true){ // 添加到select1里面 select1.appendChild(optioni); //數組長度發生變化，需要處理 i--; } } } // 全部添加到右邊 function allToRight(){ // 獲取select2標簽 var select2 = document.getElementById("select2"); // 獲取select1標簽 var select1 = document.getElementById("select1"); // 獲取option var option1 = select1.getElementsByTagName("option"); // 遍歷 for (var i=0;i<option1.length;i++) { var optioni = option1[i]; // 添加到select2里面 select2.appendChild(optioni); //數組長度發生變化，需要處理 i--; } } // 全部添加到左邊 function allToLeft(){ // 獲取select2標簽 var select2 = document.getElementById("select2"); // 獲取select1標簽 var select1 = document.getElementById("select1"); // 獲取option var option2 = select2.getElementsByTagName("option"); // 遍歷 for (var i=0;i<option2.length;i++) { var optioni = option2[i]; // 添加到select1里面 select1.appendChild(optioni); //數組長度發生變化，需要處理 i--; } } </script> </head> <body> <div id="s1" style="float: left;"> <div> <select id="select1" multiple="multiple" style="width: 100px;height: 100px;"> <option>AAAAAAA</option> <option>BBBBBBB</option> <option>CCCCCCC</option> <option>DDDDDDD</option> <option>EEEEEEE</option> </select> <div> <input type="button" value="選中添加到右邊" onclick="selectedToRight();"/><br /> <input type="button" value="全部添加到右邊" onclick="allToRight();"/> </div> </div> </div> <div id="s2" > <div> <select id="select2" multiple="multiple" style="width: 100px;height: 100px;"> <option>FFFFFFF</option> </select> <div> <input type="button" value="選中添加到左邊" onclick="selectedToLeft();"/><br /> <input type="button" value="全部添加到左邊" onclick="allToLeft();"/> </div> </div> </div> </body> </html>