將左邊框中的元素移到右邊框
阿新 • • 發佈:2019-01-09
1.頁面
<table> <tr width="100%" height="300px" style="margin:5px,auto;"> <td width="40%"> <select id="select1" multiple style="margin-left: 10px;"> <option value="apple" selected>蘋果</option> <option value="banana">香蕉</option> </select> </td> <td width="20%" align="center"> <input class="oprationb" id="add" type="button" value=">"/><br> <input class="oprationb" id="remove" type="button" value="<"/><br> <input class="oprationb" id="add_all" type="button" value=">>"/><br> <input class="oprationb" id="remove_all" type="button" value="<<"/><br> <input id="mselect" style="width: 50px;margin-top:12px;height: 30px;" type="button" value="確定"/><br> </td> <td width="40%" > <select id="select2" multiple height="300px"> </select> </td> </tr> </table>
2.樣式
body{ font-family: Tahoma; font-size: 8pt ;} select{ width: 150px; height: 250px; border: 1px solid ; } .oprationb{ width:20px; height: 20px; margin:5px 5px 5px 5px; } select option { text-indent: 10px; font: 14px/20px "Microsoft YaHei"; margin-top: 20px; color:#00527f } select option:hover { background-color: #f80; color: #fff; }
3.jquery
$(function(){ //移到右邊 $('#add').click(function(){ //獲取選中的選項,刪除並追加給對方 //$('#select1 option:selected').appendTo('#select2'); $('#select1 option:selected').each(function(){ var valk = $(this).val(); var htmlk = $(this).html(); $("#select2").append("<option value='"+valk+"'>"+htmlk+"</option>"); }) }); //移到左邊 $('#remove').click(function(){ // $('#select2 option:selected').appendTo('#select1'); $('#select2 option:selected').each(function(){ $(this).remove(); }); }) //全部移到右邊 $('#add_all').click(function(){ //獲取全部的選項,刪除並追加給對方 //$('#select1 option').appendTo('#select2'); $('#select1 option').each(function(){ var valk = $(this).val(); var htmlk = $(this).html(); $("#select2").append("<option value='"+valk+"'>"+htmlk+"</option>"); }); }); //全部移到左邊 $('#remove_all').click(function(){ //$('#select2 option').appendTo('#select1'); $('#select2').empty(); }); //雙擊選項 $('#select1').dblclick(function(){ //繫結雙擊事件 //獲取全部的選項,刪除並追加給對方 // $("option:selected",this).appendTo('#select2'); //追加給對方 var valk = $("option:selected",this).val(); var htmlk = $("option:selected",this).html(); $("#select2").append("<option value='"+valk+"'>"+htmlk+"</option>"); }); //雙擊選項 $('#select2').dblclick(function(){ // $("option:selected",this).appendTo('#select1'); $("option:selected",this).remove(); }); });