jqueryで複数の選択オプションを追加する

Question

アイテムを左から右に移動する機能を作成しました。その逆もあります。さらに、各項目のoptionの値が隠し入力ボックスに追加されているため、後で処理するためにサーバーに送信することができます。 一度に複数の項目を追加しようとすると、最初の項目だけが非表示の入力ボックスに追加されているようです。最後に

、私の隠された入力フィールドは、次のようになります。私は（良いオプションがありますしない限り）に何を解析して行うためにRailsのサーバー側でのRubyでのパラメーターを受け入れますので3233,2332,3234,1212,112

。あなたが複数になっている

$("#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="" />