选择动态表单字段的Coffee脚本在Firefox中不起作用

Question

我有一个遗留的Rails 3.2.14应用程序，我试图通过关联、grouped_collection_select和一些CoffeeScript按地区约束设施列表。我最初的问题是：CoffeeScript在更改和加载时动态更改表单字段。在一些帮助下，我们能够初步解决问题，并实现以下行为。

在呼叫创建时，选择一个区域，设施受其所属区域的约束，此字段称为transfer_from_id。当创建一个地址未在Facility模型中列出的调用时，我们使用transfer_from_other字段来输入地址。当这种情况发生时，transfer_from_id字段故意留空，并注入NIL以防止CoffeeScript自动填充模型中的第一个设施。

当编辑transfer_from_id包含值的调用时，transfer_frot_id显示为具有形式中的设施名称。

最初，下面的代码在Chrome中运行得很好，但当我在Firefox中测试调用创建时的行为时，它会用列表中的第一个工具自动填充transfer_from_id字段，尽管我们在CoffeeScript中预先准备了一个空选项。编辑调用时，会观察到相同的行为。

我想知道如何在Firefox中解决这个问题，因为我们使用这个应用程序跨平台/浏览器。我真的很想让这个功能发挥作用，但我不知道为什么它在Firefox中不起作用。我已经使用firebug尝试调试它，但是我在控制台中没有看到任何错误。

以下是我的代码库摘录，可能有助于说明我正在尝试做什么：

调用/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 %>

调用.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()

设施.rb

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

区域.rb

  has_many :facilities
  def active_facilities 
    self.facilities.active
  end

我是CoffeeScript的新手，我的JS/jQuery技能现在还不是很好，所以我可以在这方面提供一些帮助，让它跨浏览器工作。任何提示或建议都将不胜感激。我希望这不是一个重复的问题，如果我的问题不清楚或你需要更多信息，请随时告诉我。

Answer 1

经过一些黑客攻击和尝试/错误，我能够对适用于所有浏览器的CoffeeScript进行编辑。在最新版本的Firefox中，prepend方法似乎没有正确运行，所以我包含了一个空白选项，然后在一行中添加了设施选项数组。

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()