HTML下拉選擇 簡單例項 新增刪除節點到另一個節點下
阿新 • • 發佈：2018-12-20
下拉選擇 簡單例項
<html> <head> <title>HTML</title> <style type="text/css"> </style> </head> <body> <div id="s1" style="float:left;"> <div> <select id="select1" multiple="multiple" style="width:200px;height:120px;"> <option>貂蟬</option> <option>王昭君</option> <option>西施</option> <option>楊玉環</option> <option>褒姒</option> <option>大喬小喬</option> <option>妲己</option> <option>馮小憐</option> <option>趙飛燕</option> <option>甄宓</option> <option>鄭旦</option> </select> </div> <div > <input type="button" value="選中新增到右邊>>" onclick="SingleSelect('select1','select2');"><br/> <input type="button" value="全部新增到右邊>>" onclick="AllSelect('select1','select2');"> </div> </div> <div id="s2" > <div> <select id="select2" multiple="multiple" style="width:200px;height:120px;"> <option>老婆</option> </select> </div> <div> <input type="button" value="<<選中新增到左邊" onclick="SingleSelect('select2','select1');"><br> <input type="button" value="<<全部新增到左邊" onclick="AllSelect('select2','select1');"> </div> </div> <script type="text/javascript"> function AllSelect(RealBeGetSelec,RealGetSelec){ //獲得兩個select物件 var beGetSelec=document.getElementById(RealBeGetSelec); var getSelect=document.getElementById(RealGetSelec); //獲得option物件集合 var Alloption=beGetSelec.getElementsByTagName("option"); for(var i=0;i<Alloption.length;i++){ getSelect.appendChild(Alloption[i]); i--; } } //將選中的傳給另一邊 function SingleSelect(RealBeGetSelec,RealGetSelec){ //獲得兩個select物件 var beGetSelec=document.getElementById(RealBeGetSelec); var getSelect=document.getElementById(RealGetSelec); //獲得option物件集合 var Alloption=beGetSelec.getElementsByTagName("option"); //將選中的逐個新增到另一邊 for(var i=0;i<Alloption.length;i++){ if(Alloption[i].selected==true){ getSelect.appendChild(Alloption[i]); i--; } } } </script> </body> </html>