根据选择

Question

在我的Rails应用中，我有一个select下拉列表，用户可以在其中选择一个＆＃39;组＆＃39;然后他们会分配IP地址，从左到右移动它们。

如何使用已分配给已选择的特定群组的IP地址预先填充右侧选择框（hosts_assigned）？我可以＆ ＃39; t通过我的Rails控制器来完成，因为选择该组并不会重新加载页面，所以我假设它将是一个jQuery的东西。

我已经设置了Rails MVC，所以我可以使用group.network_hosts来获取分配给给定组的所有网络主机。

现在视图非常简单，一些jQuery允许从左到右移动IP，反之亦然：

<%= form_tag '/edit_host_group', id: 'edit_host_group_form', class: "form-horizontal form-label-left" do %>
  <%= label_tag "Group", nil, required: true, class: "control-label col-md-2 col-sm-2 col-xs-12" %>

  <%= select_tag "groups", options_from_collection_for_select(@host_groups, "id", "name"), include_blank: false, class: "form-control" %>
  <%= label_tag "Available Hosts", nil, class: "control-label col-md-2 col-sm-2 col-xs-12" %>

  <select id="hosts_available" class="form-control" size="30" multiple="multiple">
    <% @network_hosts.each do |n| %>
      <% next if n.network_host_group_id %>
      <option value="<%= n.id %>"><%= n.ip_address %></option>
    <% end %>
  </select>

  <button type="button" id="btnRight" class="btn btn-success"><i class="fa fa-2x fa-forward"></i></button>
  <br/>
  <button type="button" id="btnLeft" class="btn btn-danger"><i class="fa fa-2x fa-backward"></i></button>

  <select id="hosts_assigned" class="form-control" size="30" multiple="multiple"></select>

  <%= text_field_tag :hosts %>
  <%= submit_tag "Add Group", class: "btn btn-success" %>
<% end %>


<script>
  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>

Answer 1

1. 您必须为组选择标记的onChange事件添加处理程序。
2. 在该事件处理程序中，获取当前组ID并执行ajax以获取分配给该组的IP列表。 Ajax可能会返回整个select标记或只返回原始数据（json的IP列表）。
3. 在jQuery页面加载事件中，您必须手动触发onChange事件，因此将为第一个组加载IP。
4. 当用户进行更改时，您还必须保存当前的hosts_assigned。再次使用ajax。您已定义的事件处理程序。