前端框架jQ使用之下拉框文字內容的轉移
阿新 • • 發佈：2018-12-14
在掌握了jQ的基礎知識之後，我們來看看jQ如何實現下拉框文字內容的轉移？
其實，在之前，博主我也寫過一篇使用js實現下拉框文字內容的轉移的文章，需要比較強的邏輯，jQ就簡化了程式碼書寫，便於理解。
寫在前面：一定要記得匯入js庫，建議不要最新的。
直接上程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> * { margin: 0; padding: 0; } .wide { width: 400px; margin: 0 auto; } .selcetwords { width: 100px; } </style> </head> <body> <div class="wide"> <!--<form action="#" method="get" name="myform">--> <select size="10" name="leftwords" id="leftwords" class="selcetwords" multiple="multiple"> <option value="aaa">aaa</option> <option value="bbb">bbb</option> <option value="ccc">ccc</option> <option value="ddd">ddd</option> </select> <button id="rightmove">右移</button> <button id="leftmove">左移</button> <select size="10" name="rightwords" id="rightwords" class="selcetwords" multiple="multiple"> <option value="xxx">xxx</option> <option value="yyy">yyy</option> <option value="zzz">zzz</option> </select> <!--</form>--> </div> </body> <script type="text/javascript"> $().ready( function(){ $("#rightmove").click( function(){ $("option:selected").appendTo($("#rightwords")); } ); $("#leftmove").click( function(){ $($("#leftwords")).append($("option:selected")); } ); } ); </script> </html>
以上程式碼可以供學習交流直接使用，轉載請宣告來源地址。