Rails動態更改集合在表單中選擇基於表單域

Question

我有一個跟蹤調用的Rails 3.2.14應用程序，每個調用都有一個來自Facility關聯的Facility模型的Pickup和Dropoff工具。

在呼叫模型中，有一個區域模型（即休斯頓，達拉斯，奧斯汀等）的關聯，我們根據呼叫的來源選擇區域。

我想要做的是能夠選擇特定的區域（即休斯頓），並在皮卡設施集合只顯示休斯頓地區的設施。

我假設，開始了與我需要設置爲這樣的設施和區域之間的關係：

facility.rb

attr_accessible :region_id 
belongs_to :region 

region.rb

has_many :facilities 

然後，我需要設置每個設施與region_id匹配respecti （即休斯頓，達拉斯等），所以協會工作正常。

我不確定的是如何選擇特定的區域，只有在該區域的設施顯示在窗體中。我假設我會在這裏使用一些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

基於關閉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 which l ists所有的設施，我需要調用相當於Facility.active（我在Facility上創建的範圍僅列出活動設施）。我如何從grouped_collection_select中調用它？

到目前爲止，在一個新的調用中，我可以選擇區域，然後該區域的設施只顯示在from字段（transfer_from_id被調用）中。在編輯呼叫並嘗試更改設施時，我會看到按地區分組的設施的完整列表，而不僅僅是該地區的設施。如果我想縮小範圍，我必須更改區域，然後將其更改爲原始特定區域的設施以單獨顯示。

我想我正在取得進展，但它沒有按照我想要的方式工作。我非常樂於接受更有意義，更清晰的答案。

Answer 2

對於這樣的事情，我通常通過在客戶端加載一個字典來保持它的真實性，並且僅僅引用它。

所以在你看來，你可以打造出了這樣的事情：

<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猜測的。