javascript - 根据选择更新选项

Question

在我的 Rails 应用程序中，我有一个选择下拉列表，用户可以在其中选择一个“组”，然后为该组分配 IP 地址以从左向右移动它们。

如何使用已分配给所选特定组的 IP 地址预先填充右侧选择框 (hosts_signed)？ 我可以”不要通过我的 Rails Controller 来执行此操作，因为选择组不会重新加载页面，因此我假设这将是 jQuery 的事情。

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

现在的 View 非常简单，使用一些 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 可能返回整个选择标记或仅返回原始数据(IP 的 JSON 列表)。
3. 在 jQuery 页面加载事件中，您必须手动触发 onChange 事件，以便为第一组加载 IP。
4. 当用户进行更改时，您还必须保存当前分配的主机。再次使用ajax。您已经定义的事件处理程序。