使用jquery來實現兩個選擇框內容的互移
阿新 • • 發佈：2018-12-29
今天開發專案的時候遇到了一個小問題：實現兩個文字框內容列表的互相移動，我剛開始使用了純js實現的，後來經過公司同事指點，使用jquery來實現這個功能，非常簡單。將程式碼貼出來，供以後複習使用。
最主要的應該是就會要學會靈活的運用jquery的函式庫
1.我做了個小demo，先將頁面展示出來。
網頁原始碼如下：
<body> <div class="content_group"> <div class="span4"> <label class="control-label">請選擇職業:</label> <div class="controls"> <select id="idList" multiple="multiple" size="5" style="float: left"> <option value="1">java開發工程師</option> </select> <div style="width: 60px;float: left;text-align:center;margin-top:25px;"> <input type="button" id="add" value="<<新增" > <input type="button" id="remove" value=">>移除" > </div> <select id="ids" multiple="multiple" size="5" style="float: left"> <option value="2">android開發工程師</option> <option value="3">ios開發工程師</option> <option value="4">php開發工程師</option> <option value="5">c++開發工程師</option> </select> </div> </div> </div> </body>
2.引入jquery外掛，然後寫新增和移除的功能
使用jquery來實現
$(function(){ //使用jquery來實現這個功能 $("#add").click(function() { //獲取右邊文字框的被選中項，這裡必須使用:selected來選擇，不能使用[selected='selected']來選擇 var selectedOptions = $("#ids > option:selected"); //獲取左邊的文字框jquery物件 var idList = $("#idList"); //呼叫append方法就完事了 idList.append(selectedOptions); }); //移除方法與此類似 $("#remove").click(function() { var selectedOptions = $("#idList > option:selected"); var ids = $("#ids"); ids.append(selectedOptions); }) });