Rails动态更改集合基于表单字段在表单中选择

Question

我有一个跟踪呼叫的Rails 3.2.14应用程序，每个呼叫都有一个来自设施模型的关联的代答和下车设施。

在呼叫模型中，存在区域模型的关联（即，休斯顿，达拉斯，奥斯丁等），我们根据呼叫的来源来选择区域。

我想做的是能够选择特定区域（即休斯顿），并且在接送设施集合中仅显示休斯顿地区的设施。

我假设首先要在Facility和Region之间建立一个关系，如下所示：

facility.rb

attr_accessible :region_id
belongs_to :region

region.rb

has_many :facilities

然后，我需要为每个设施设置一个与各自区域（例如，休斯顿，达拉斯等）相匹配的region_id，以便关联正常运行。

我不确定的是如何选择特定区域，并且仅以表格形式显示该区域中的设施。 我假设我会在这里使用一些jQuery / JS / Ajax来实现它，但不确定如何使它工作。

以下是我的呼叫，设施和区域模型当前的摘要：

call.rb

belongs_to :transferred_from, :foreign_key => :transfer_from_id, :class_name => 'Facility'
belongs_to :transferred_to, :foreign_key => :transfer_to_id, :class_name => 'Facility'
belongs_to :region

facility.rb

has_many :calls_transferred_from, :foreign_key => :transfer_from_id, :class_name => 'Call'
has_many :calls_transferred_to, :foreign_key => :transfer_to_id, :class_name => 'Call'

region.rb

has_many :calls

这是我的部分呼叫表格的摘录：

_form.html.erb

<%= form_for(@call) do |f| %>
  <%= f.label :region %>
  <%= f.collection_select(:region_id, Region.all, :id, :area, {:include_blank => true}, {:class => 'select', required: true}) %>
  <%= f.label :Transfer_From %>
  <%= f.collection_select(:transfer_from_id, Facility.active.order("facility_name ASC"), :id, :facility_name, {:include_blank => true}, {:class => 'select'}) %>
 <%= f.button "Submit", class: 'btn btn-info btn-large', data: {disable_with: "<i class='icon-spinner'></i>Processing..."} %> 
<% end %>

如果有任何混淆或需要澄清的地方，请告诉我。 总而言之，我试图选择一个区域（休斯顿），并且仅在选择该区域时以表格形式显示休斯顿区域中的设施。

在此先感谢您提供的任何帮助或提示。

Answer 1

对于这样的事情，我通常通过在客户端中加载字典并引用它来使其保持简单。

因此，在您看来，您可以构建如下所示的内容：

<script>
  var facilitiesForRegion = {};
  <% Facility.all.each do |facility| %>
    var region = facilitiesForRegion[<%= facility.region_id %>];
    var object = { id: <%= facility.id %>, name: '<%= facility.facility_name %>'};
    if (region) {
      region.push(object);
    }
    else {
      facilitiesForRegion[<%= facility.region_id %>] = [object];
    }
  <% end %>

  $("#call_region_id").on("change", function (e) {
    var id = parseInt($(this).val());
    var facilities = facilitiesForRegion[id];
    $('#call_transfer_from_id').children().remove();
    for (var i = 0; i < facilities.length; i++) {
      $('#call_transfer_from_id').push('<option value="'+ facilities[i].id +'">'+ facilities[i].name +'</option>');
    }
  });
</script>

这有点丑陋。 我不是在这样的视图中构建数据数组的最大支持者，但是它可以正常工作，并且避免了等待ajax请求。

请务必仔细检查下拉菜单的ID。 我在猜测，基于字段名称和for_for。

Answer 2

基于Railscasts动态选择菜单，我提出了以下内容：

Calls.js.coffee

jQuery ->
  facilities = $('#call_transfer_from_id').html()

  $('#call_region_id').change ->
    region = $('#call_region_id :selected').text()
    options = $(facilities).filter("optgroup[label=#{region}]").html()

    if options
      $('#call_transfer_from_id').html(options)   
    else
      $('#call_transfer_from_id').empty()

_form.html.erb

<%= f.grouped_collection_select :transfer_from_id, Region.order(:area), :facilities, :area, :id, :facility_name, {include_blank: true}, class: 'select' %>

上面的grouped_collection_select的问题在于它调用：facilities列出了所有设施，我需要调用Facility.active的等效项（我在Facility上创建的范围仅列出了活动设施）。 如何在grouped_collection_select中调用它？

到目前为止，在一个新呼叫中，我能够选择区域，然后仅在from字段中显示该区域的设施（被调用transfer_from_id）。 在编辑呼叫并尝试更改设施时，系统会向我显示按地区分组的设施的完整列表，而不仅仅是该地区的设施。 如果要缩小范围，则必须更改区域，然后将其更改回原始，以使特定区域的设施仅显示出来。

我认为我在此方面取得了进展，但并没有达到我想要的方式。 我很乐于接受更有意义，更清晰的答案。