用jQuery添加多個選擇選項

Question

我已經創建了從左側->右側移動項目的功能，反之亦然。 最重要的是，我將每個項目的option值添加到一個隱藏的輸入框中，以便以后可以將其提交給服務器進行處理。 看來，當我嘗試一次添加多個項目時，雖然只有第一個被添加到隱藏的輸入框中。

最后，我的隱藏輸入字段應類似於： 3233,2332,3234,1212,112

由於我將接受Ruby on Rails服務器端的參數來解析和執行任何操作（除非有更好的選擇）。

這是我當前的代碼：

 $("#btnLeft").click(function(){ var selectedItem = $("#hosts_assigned option:selected"); $("#hosts_available").append(selectedItem); $("#hosts").remove(selectedItem.val()); }); $("#btnRight").click(function(){ var selectedItem = $("#hosts_available option:selected"); $("#hosts_assigned").append(selectedItem); var current_hosts = $("#hosts").val(); $("#hosts").val(current_hosts + "," + selectedItem.val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <select id="hosts_available"size="30" multiple="multiple"> <option value="1222">1.1.2.2</option> <option value="1232">1.1.2.2</option> <option value="1242">1.1.2.2</option> <option value="1252">1.1.2.2</option> </select> <select id="hosts_assigned" size="30" multiple="multiple"> <option value="1111">1.1.2.1</option> </select> </form> <button type="button" id="btnRight">&gt;&gt;</i></button> <br/> <button type="button" id="btnLeft">&lt;&lt;</i></button> <br/><br/> <input type="text" id="hosts" /> 

Answer 1

您得到的不止一個。

您需要循環。 您還需要在刪除后循環

 function getHosts() { var current_hosts=[]; $("#hosts_assigned option").each(function() { current_hosts.push($(this).val()); }); return current_hosts.length>0?current_hosts.join(","):""; } $("#btnLeft").click(function() { $("#hosts_assigned option:selected").each(function() { $("#hosts_available").append(this); }) $("#hosts").val(getHosts()); }); $("#btnRight").click(function() { $("#hosts_available option:selected").each(function() { $("#hosts_assigned").append(this); }); $("#hosts").val(getHosts()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <select id="hosts_available" size="30" multiple="multiple"> <option value="1222">1.1.2.2</option> <option value="1232">1.1.2.2</option> <option value="1242">1.1.2.2</option> <option value="1252">1.1.2.2</option> </select> <select id="hosts_assigned" size="30" multiple="multiple"> <option value="1111">1.1.2.1</option> </select> </form> <button type="button" id="btnRight">&gt;&gt;</i> </button> <br/> <button type="button" id="btnLeft">&lt;&lt;</i> </button> <br/> <br/> <input type="text" id="hosts" value="" />