jQuery實(shí)現(xiàn)下拉框左右移動(dòng)(全部移動(dòng),已選移動(dòng))
用到的方法為:appendTo()
格式:$(content).appendTo(selector)
appendTo() 方法在被選元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容。
click() 方法觸發(fā) click 事件,或規(guī)定當(dāng)發(fā)生 click 事件時(shí)運(yùn)行的函數(shù)。
看一下具體實(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"); //獲取選中的選項(xiàng) // var $remove = $option.remove(); //刪除下拉列表中選中的選項(xiàng) // $remove.appendTo("#select2"); //追加給對(duì)方 //2,方式二 var $option = $("#select1 option:selected"); //獲取選中的選項(xiàng) $option.appendTo("#select2"); //追加給對(duì)方 }); $("#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>
運(yùn)行效果:
- jquery select多選框的左右移動(dòng) 具體實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)左右兩個(gè)列表框的內(nèi)容相互移動(dòng)功能示例
- jQuery實(shí)現(xiàn)可移動(dòng)選項(xiàng)的左右下拉列表示例
- jquery實(shí)現(xiàn)列表上下移動(dòng)功能
- jquery移動(dòng)點(diǎn)擊的項(xiàng)目到列表最頂端的方法
- jQuery實(shí)現(xiàn)用方向鍵控制層的上下左右移動(dòng)
- jQuery讓控件左右移動(dòng)的三種實(shí)現(xiàn)方法
- jQuery slider Content(左右控制移動(dòng))
- 基于jquery實(shí)現(xiàn)左右上下移動(dòng)效果
- Jquery實(shí)現(xiàn)多選下拉列表左右移動(dòng)
相關(guān)文章
jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)公告新聞自動(dòng)滾屏效果實(shí)例代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07jquery中$(#form :input)與$(#form input)的區(qū)別
本節(jié)為大家介紹下jquery 中$(#form :input)與$(#form input)的區(qū)別,需要的朋友可以參考下2014-08-08EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實(shí)現(xiàn)代碼
今天做項(xiàng)目的時(shí)候,想在easyui的datagrid每一列數(shù)據(jù)后邊都加上一個(gè)操作按鈕,怎么實(shí)現(xiàn)此功能呢?下面小編給大家?guī)?lái)了EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實(shí)現(xiàn)代碼,需要的朋友參考下吧2017-08-08jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法,涉及jQuery針對(duì)頁(yè)面元素屬性的判斷與動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09Javascript技巧之不要用for in語(yǔ)句對(duì)數(shù)組進(jìn)行遍歷
Javascript技巧-不要用for in語(yǔ)句對(duì)數(shù)組進(jìn)行遍歷的一些原因分析,需要的朋友可以參考下。2010-10-10jquery實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
如何實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件,下面有個(gè)不不錯(cuò)的示例使用jquery實(shí)現(xiàn)的,感興趣的朋友可以參考下2014-01-01jQuery獲得IE版本不準(zhǔn)確webbrowser的解決方法
用$.browser.version經(jīng)常出現(xiàn)一些不準(zhǔn)確的狀況,最近碰到,做了一些總結(jié),不知道是否全面2014-02-02