javascript - 使用 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="" />