用於在Firefox中無法選擇動態表單字段的Coffee腳本

Question

我有一個舊版的Rails 3.2.14應用程序，我試圖通過一個關聯，grouped_collection_select和一些CoffeeScript來按地區限制設施列表。 我的原始問題在這里： CoffeeScript在更改和加載時動態更改表單字段 。 在一些幫助下，我們能夠首先解決問題並實現以下行為。

在“呼叫”上，將選擇一個區域並根據其所屬的區域來限制設施，此字段稱為transfer_from_id。 當使用設施模型中未列出的地址創建呼叫時，我們使用transfer_from_other字段輸入地址。 發生這種情況時，故意將transfer_from_id字段留空，並注入NIL以防止CoffeeScript自動填充模型中的第一個工具。

編輯包含transfer_from_id包含值的呼叫時，將在表格中以設施名稱顯示transfer_from_id。

最初，下面的代碼在Chrome中可以完美運行，但是當我去測試Firefox在調用create時的行為時，即使我們在CoffeeScript中添加了空白選項，它也會自動使用列表中的第一個功能填充transfer_from_id字段。 編輯呼叫時，觀察到相同的行為。

我想弄清楚如何在Firefox中解決此問題，因為我們使用此應用程序是跨平台/瀏覽器的。 我真的很想讓此功能正常運行，但是我對為什么它在Firefox中不起作用感到困惑。 我已經使用firebug嘗試調試它，但是在控制台中看不到任何錯誤。

以下是我的代碼庫的摘錄，這可能有助於說明我正在嘗試做的事情：

Calls / _form.html.erb摘錄

  <%= f.label :region %>
  <%= f.collection_select(:region_id, Region.all, :id, :area, {:include_blank => true}, {:class => 'select', required: true}) %>
  <%= f.label :caller_name %>
  <%= f.text_field :caller_name, :placeholder => 'Jane Smith', required: true %>
  <%= f.label :caller_phone %>
  <%= f.text_field :caller_phone, :placeholder => 'xxx-xxx-xxxx', required: true %>
  <%= f.label :Transfer_From %>
  <%= f.grouped_collection_select :transfer_from_id, Region.order(:area), :active_facilities, :area, :id, :facility_name, {include_blank: true}, class: 'select' %>
  <%= f.label :Transfer_From_Other%>
  <%= f.text_field :transfer_from_other %>
  <%= f.label :Location_Of_Patient %>
  <%= f.text_field :facility_from_location %>
  <%= f.label :Transfer_To %>
  <%= f.grouped_collection_select :transfer_to_id, Region.order(:area), :active_facilities, :area, :id, :facility_name, {include_blank: true}, class: 'select' %>
  <%= f.label :Transfer_To_Other %>
  <%= f.text_field :transfer_to_other %>

Calls.js.coffee

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

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

    if options
      # Set the options
      $('#call_transfer_from_id').html(options)
      # Add in a blank option at the top
      $('#call_transfer_from_id').prepend("<option value=''></option>")
    else
      $('#call_transfer_from_id').empty()      

  $('#call_region_id').change ->
    update_facilities()

  update_facilities()

facility.rb

belongs_to :region
scope :active, where(status: "Active").order('facility_name ASC')

region.rb

  has_many :facilities

  def active_facilities 
    self.facilities.active
  end

我是CoffeeScript的新手，我的JS / jQuery技能現在還不是很熟練，因此我可以在此上使用一些幫助來使其能夠跨瀏覽器工作。 任何提示或建議，不勝感激。 我希望這不是重復的問題，如果我的問題不清楚或您需要更多信息，請隨時告訴我。

Answer 1

經過一番黑客攻擊和反復試驗后，我終於可以對CoffeeScript進行編輯，該腳本可在所有瀏覽器中使用。 似乎prepend方法在最新版本的Firefox中無法正常運行，因此我添加了一個空白選項，然后在一行中添加了tools選項數組。

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

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

    if options
      # Set the options and include a blank option at the top
      $('#call_transfer_from_id').html("<option value=''></option>" + options)
      # Ensure that the blank option is selected
      $('#call_transfer_from_id').attr("selected", "selected")
    else
      $('#call_transfer_from_id').empty()

  $('#call_region_id').change ->
    update_facilities()

  update_facilities()