jQuery實現(xiàn)Select左右復(fù)制移動內(nèi)容
引入的文件為<script type="text/javascript" src="jquery-1.10.2.js"></script>
雙擊也可以移動
[1].[代碼]
<script type="text/javascript"> $(function(){ //移到右邊 $("#add").click(function(){ //獲取選中的選項,刪除并追加給對方 $("#select1 option:selected").appendTo("#select2"); }); //移到左邊 $("#remove").click(function(){ $("#select2 option:selected").appendTo("#select1"); }); //全部移到右邊 $("#add_all").click(function(){ //獲取全部的選項,刪除并追加給對放 $("#select1 option").appendTo("#select2"); }); //全部移到左邊 $("#remove_all").click(function(){ $("#select2 option").appendTo("#select1"); }); //雙擊選項 $("#select1").dblclick(function(){//綁定雙擊事件 //獲取全部的選項,刪除并追加給對方 $("option:selected",this).appendTo("#select2");//追加給對方 }); //雙擊選項 $("#select2").dblclick(function(){ $("option:selected",this).appendTo("#select1"); }); }) </script>
[2].[代碼]
<body> <h1>Select JQuery 實現(xiàn)左右復(fù)制移動內(nèi)容</h1> <div style="width:500px;"> <div class="centent" style="float:left;"> <select multiple="multiple" id="select1" style="width:130px;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> <option value="8">選項8</option> </select> <div> <button id="add" >選中添加到右邊>></button><br> <button id="add_all" >全部添加到右邊>></button> </div> </div> <div class="centent" style="padding-left:160px;"> <select multiple="multiple" id="select2" style="width: 130px;height:160px;"> </select> <div> <button id="remove"><<選中刪除到左邊</button><br> <button id="remove_all"><<全部刪除到左邊</button> </div> </div> </div> </body>
[3].[圖片]
[4].[圖片]
以上所述是小編給大家介紹的jQuery實現(xiàn)Select左右移動復(fù)制內(nèi)容,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery ajax局部加載方法詳解(實現(xiàn)代碼)
下面想就為大家?guī)硪黄猨query ajax局部加載方法詳解(實現(xiàn)代碼)。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-05-05Iframe實現(xiàn)跨瀏覽器自適應(yīng)高度解決方法
這篇文章主要介紹了Iframe實現(xiàn)跨瀏覽器自適應(yīng)高度解決方法,通過父層容器的應(yīng)用來實現(xiàn)這一功能,非常實用的一個技巧,需要的朋友可以參考下2014-09-09jquery+css實現(xiàn)側(cè)邊導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了jquery+css實現(xiàn)側(cè)邊導(dǎo)航欄效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06jquery中ajax函數(shù)執(zhí)行順序問題之如何設(shè)置同步
這篇文章主要介紹了jquery中ajax函數(shù)執(zhí)行順序問題之如何設(shè)置同步,需要的朋友可以參考下2014-02-02Jquery對新插入的節(jié)點 綁定Click事件失效的解決方法
下面小編就為大家?guī)硪黄狫query對新插入的節(jié)點 綁定Click事件失效的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06