JQuery給select添加/刪除節點的實現代碼
648
2024-03-07
說一百句,不如我給大家貼張效果圖,效果圖請看下面:
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } div.centent { float: left; text-align: center; margin: 10px; } span { display: block; margin: 2px 2px; padding: 4px 10px; background: #898989; cursor: pointer; font-size: 12px; color: white; } </style> <script src="http://www.gimoo.net/t/1903/jquery-1.3.2.min.js"></script> <script> $(function () { $("#add").click(function () {//單個添加 var $options = $("#select1 option:selected"); $options.appendTo("#select2"); }); $("#add_all").click(function () {//全部添加 $("#select1 option").each(function () { $(this).appendTo("#select2"); /* 也可以寫為: var p=$("#select1 option"); p.appendTo("#select2"); */ }); }); $("#remove").click(function () {//同上,只不過方向相反 var $options = $("#select2 option:selected"); // var $remove = $options.remove(); $options.appendTo("#select1"); }); $("#remove_all").click(function () {//同上,只不過方向相反 var p = $("#select2 option"); p.appendTo("#select1"); }); }); </script> </head> <body> <div class="centent"> <select multiple id="select1" style="width:100px;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> </select> <div> <span id="add">選中添加到右邊>></span> <span id="add_all">全部添加到右邊>;></span> </div> </div> <div class="centent"> <select multiple id="select2" style="width:100px;height:160px"></select> <div> <span id="remove"><<選中刪除到左邊</span> <span id="remove_all"><<全部刪除到左邊</span> </div> </div> </body> </html>
以上內容是小編給大家介紹的jquery 下拉框功能實例,希望對大家有所幫助!
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!