jQuery實現(xiàn)下拉框左右移動(全部移動,已選移動)
用到的方法為:appendTo()
格式:$(content).appendTo(selector)
appendTo() 方法在被選元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容。
click() 方法觸發(fā) click 事件,或規(guī)定當發(fā)生 click 事件時運行的函數(shù)。
看一下具體實現(xiàn)的代碼:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#add").click(function () { //1,方式一 // var $option = $("#select1 option:selected"); //獲取選中的選項 // var $remove = $option.remove(); //刪除下拉列表中選中的選項 // $remove.appendTo("#select2"); //追加給對方 //2,方式二 var $option = $("#select1 option:selected"); //獲取選中的選項 $option.appendTo("#select2"); //追加給對方 }); $("#add_all").click(function () { var $option = $("#select1 option"); $option.appendTo("#select2"); }); $("#remove").click(function () { var $option = $("#select2 option:selected"); $option.appendTo("#select1"); }); $("#remove_all").click(function () { var $option = $("#select2 option"); $option.appendTo("#select1"); }); }); </script> </head> <body> <h3>下拉框應(yīng)用</h3> <table> <tr> <td> <select id="select1" multiple="multiple" style="width:100px;"> <option value="News">News</option> <option value="Sport">Sport</option> <option value="Education">Education</option> <option value="Technology">Technology</option> <option value="Art">Art</option> </select> </td> <td> <button id="add"> >|</button><br /> <button id="add_all"> >></button><br /> <button id="remove_all"> <<</button><br /> <button id="remove"> |<</button> </td> <td> <select id="select2" multiple="multiple" style="width:100px;"> </select> </td> </tr> </table> </body> </html>
運行效果:
相關(guān)文章
jquery中$(#form :input)與$(#form input)的區(qū)別
本節(jié)為大家介紹下jquery 中$(#form :input)與$(#form input)的區(qū)別,需要的朋友可以參考下2014-08-08EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼
今天做項目的時候,想在easyui的datagrid每一列數(shù)據(jù)后邊都加上一個操作按鈕,怎么實現(xiàn)此功能呢?下面小編給大家?guī)砹薊asyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼,需要的朋友參考下吧2017-08-08jQuery實現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
這篇文章主要介紹了jQuery實現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法,涉及jQuery針對頁面元素屬性的判斷與動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09Javascript技巧之不要用for in語句對數(shù)組進行遍歷
Javascript技巧-不要用for in語句對數(shù)組進行遍歷的一些原因分析,需要的朋友可以參考下。2010-10-10jquery實現(xiàn)input輸入框?qū)崟r輸入觸發(fā)事件代碼
如何實現(xiàn)input輸入框?qū)崟r輸入觸發(fā)事件,下面有個不不錯的示例使用jquery實現(xiàn)的,感興趣的朋友可以參考下2014-01-01jQuery獲得IE版本不準確webbrowser的解決方法
用$.browser.version經(jīng)常出現(xiàn)一些不準確的狀況,最近碰到,做了一些總結(jié),不知道是否全面2014-02-02