25.用js和jquery實現下拉列表的左右選擇
阿新 • • 發佈:2018-02-23
select2 hit color nts -type utf ctype block 標簽
<!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></title> <script type="text/javascript" src="../js/jquery-1.8.3.js"></script> <style type="text/css"> * { margin:0; padding:0; } div.centent { float:left; text-align: center; margin: 10px; } span { display:block; margin:2px 2px; padding:4px 10px; background:#898989; cursor:pointer; font-size:12px; color:white; } </style> </head> <body> <div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1">選項1</option> <option value="2">選項2</option> <option value="3">選項3</option> <option value="4">選項4</option> <option value="5">選項5</option> <option value="6">選項6</option> <option value="7">選項7</option> </select> <div> <span id="add" >選中添加到右邊>></span> <span id="add_all" >全部添加到右邊>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style="width: 100px;height:160px;"> <option value="8">選項8</option> </select> <div> <span id="remove"><<選中刪除到左邊</span> <span id="remove_all"><<全部刪除到左邊</span> </div> </div> </body> <script type="text/javascript"> /** 1.先獲取到select1的標簽 2.獲取到select1下所有的option標簽 3.判斷哪一個option標簽被選中了 4.被選中的標簽添加到select2標簽的下面 */ document.getElementById("add").onclick=function(){ var select1=document.getElementById("select1"); var select2=document.getElementById("select2"); var ops=select1.getElementsByTagName("option"); for(var i=0;i<ops.length;i++){ var op=ops[i]; if(op.selected==true){ //被選中,把這個選項添加到select2 select2.appendChild(op); i--; } } } document.getElementById("add_all").onclick=function(){ var select1=document.getElementById("select1"); var select2=document.getElementById("select2"); var ops=select1.getElementsByTagName("option"); for(var i=0;i<ops.length;i++){ select2.appendChild(ops[i]); i--; } } //jquery的方式 $(function(){ $("#add").click(function(){ //先獲取select1下所有被選中的option的元素,添加到select2中取 $("#select2").append($("#select1 option:selected")); }); ("#add_all").click(function(){ $("#select2").append($("#select1 option")); }); }) </script> </html>
25.用js和jquery實現下拉列表的左右選擇