JS實現將一個文字框的值移動到另一個文字框
阿新 • • 發佈：2019-01-02
實現效果：
程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS實現將一個文字框的移動到另一個文字框</title> <script> function $(id){return document.getElementById(id);} //全部右移 >> function RightMoveAll() { var con_data=[]; //將左邊的所有值都放到臨時資料 for(var i=0;i<$("left_").length;i++) { con_data[con_data.length]=[$("left_").options[i].value,$("left_").options[i].text]; } $("right_").length=$("right_").length; //把臨時資料裡面的值放到右邊 for(var i=0;i<con_data.length;i++) { $("right_").options[$("right_").length]=new Option(con_data[i][1],con_data[i][0]); } //把左邊的資料給清空掉 for(var i=$("left_").length-1;i>=0;i--) { $("left_").removeChild($("left_").options[i]); } } //全部左移 << function LeftMoveAll() { var con_data=[]; //將右邊的所有值都放到臨時資料 for(var i=0;i<$("right_").length;i++) { con_data[con_data.length]=[$("right_").options[i].value,$("right_").options[i].text]; } //把臨時資料裡面的值放到左邊 for(var i=0;i<con_data.length;i++) { $("left_").options[$("left_").length]=new Option(con_data[i][1],con_data[i][0]); } //把右邊的資料給清空掉 for(var i=$("right_").length-1;i>=0;i--) { $("right_").removeChild($("right_").options[i]); } } //將左邊的移動到右邊，並刪掉左邊的資料 function RightMove() { var con_data=[]; var index_data=[]; //看選中的是哪一個值 for(var i=0;i<$("left_").length;i++) { if($("left_").options[i].selected) { con_data[con_data.length]=[$("left_").options[i].value,$("left_").options[i].text]; index_data[index_data.length]=[i]; } } for(var i=0;i<con_data.length;i++) { var con_fla=true; for(var k=0;k<$("right_").length;k++) { if(con_data[i][0]==$("right_").options[k].value) con_fla=false; } if(con_fla) $("right_").options[$("right_").length]=new Option(con_data[i][1],con_data[i][0]); } for(var i=index_data.length-1;i>=0;i--) { $("left_").removeChild($("left_").options[index_data[i]]); } } //將右邊的資料全部移動到左邊，並刪除右邊的資料 function LeftMove() { var con_data=[]; var index_data=[]; //看選中的是哪一個值 for(var i=0;i<$("right_").length;i++) { if($("right_").options[i].selected) { con_data[con_data.length]=[$("right_").options[i].value,$("right_").options[i].text]; index_data[index_data.length]=[i]; } } for(var i=0;i<con_data.length;i++) { var con_fla=true; for(var k=0;k<$("left_").length;k++) { if(con_data[i][0]==$("left_").options[k].value) con_fla=false; } if(con_fla) $("left_").options[$("left_").length]=new Option(con_data[i][1],con_data[i][0]); } for(var i=index_data.length-1;i>=0;i--) { $("right_").removeChild($("right_").options[index_data[i]]); } } </script> <body> <table width="355" height="192" border="1"> <tr> <td width="128" align="center" valign="middle"> <select name="left_" size="7" multiple="multiple" id="left_" style="width:100px;"> <option value="遼寧省">遼寧省</option> <option value="吉林省">吉林省</option> <option value="黑龍江省">黑龍江省</option> <option value="陝西省">陝西省</option> <option value="江蘇省">江蘇省</option> <option value="廣東省">廣東省</option> </select> </td> <td width="101" align="center" valign="middle"> <input type="button" name="rMoveAll" value=" >> " onclick="RightMoveAll();" /> <input type="button" name="rMove" value=" > " onclick="RightMove();" /> <input type="button" name="lMove" value=" < " onclick="LeftMove();" /> <input type="button" name="lMoveAll" value=" << " onclick="LeftMoveAll();" /> </td> <td width="128" align="center" valign="middle"> <select name="right_" size="7" multiple="multiple" id="right_" style="width:100px;"></select> </td> </tr> </table> </body> </html>
改得有些亂，僅供參考。