jquery實現點選按鈕左右移動的選單
阿新 • • 發佈：2019-01-30
<!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 src="jquery/jquery-1.7.1.js"></script> <script> $(document).ready(function (){ //處理向右側新增一個選項的事件 $('#right_one').click(function (){ //向右側新增一個 $('#second').append($('#first option:selected')); }); //------------處理向右插入的內容全部 $('#right_all').click(function (){ //向右側新增一個 $('#second').append($('#first option')); }); //處理向左側新增一個選項的事件 $('#left_one').click(function (){ //向左側新增一個 $('#first').append($('#second option:selected')); }); //------------處理向左插入的內容 $('#left_all').click(function (){ //向左側新增一個 $('#first').append($('#second option')); }); //雙擊事件 $('#first').dblclick(function (){ //向左側新增一個 $('#second').append($('#first option:selected')); }); $('#second').dblclick(function (){ //向左側新增一個 $('#first').append($('#second option:selected')); }); }); </script> </head> <body> <table width="300" border="1"> <tr> <td><select id='first' style="width:100px;" size="10" multiple="multiple"> <option>aa</option> <option>aa</option> </select> </td> <td> <input type="button" id="right_one" value="->"> <input type="button" id="left_one" value="<-"> <input type="button" id="right_all" value="=>"> <input type="button" id="left_all" value="<="> </td> <td><select id='second' style="width:100px;" size="10" multiple="multiple"> <option>aa</option> <option>aa</option> </select> </td> </tr> </table> </body> </html>