用于在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()