ruby-on-rails - Rails：使用“添加新”选项下拉，创建更多表单字段

Question

我想在表格上有一个下拉菜单。例如，用户正在选择一种设备类型。但是，如果它不在下拉列表中，我希望有一个“添加新”选项，当单击它时，会弹出更多用户必须填写的字段。

所以本质上，当提交表单时，它会创建两个新的模型对象：Equipment 和 EquipmentType。

这可能吗？

Answer 1

我不确定您到底需要什么，所以我为您指出两个解决方案：

1. 当您单击“添加新”时，您需要填写多个字段。这是这个 gem 的标准情况：nested_form和cocoon。

   外观示例：http ://railscasts.com/episodes/196-nested-model-form-part-1?view=asciicast

2. 当您单击“添加新”并且只想为 has_many关联添加另一个选项时。在这种情况下，您可以将标准多选转换为这种行为。看看这个问题：https ://stackoverflow.com/questions/2867795/best-jquery-multiselect-plugin ，有几个插件可以解决这个问题。

   示例： http: //odyniec.net/projects/selectlist/examples.html

Answer 2

据我所知，它仍然没有宝石。我假设您有两个模型，Equipment和EqipmentType，它们每个都有:name并且它们通过belongs_to/has_many关联连接。

我的解决方案将添加一个attr_accessor :new_equipment_typeto Equipment，在提交表单后填充。

然后，如果需要，它会创建一个新的设备类型并将其连接到设备：

# app/models/equipment.rb
class Equipment < ActiveRecord::Base
  belongs_to :equipment_type
  attr_accessible :name, :equipment_type_id, :new_equipment_type
  attr_accessor :new_equipment_type

  def new_equipment_type=(val)
    if equipment_type_id.blank?
      write_attribute(:equipment_type_id, EquipmentType.create(name: val).id)
    end
  end

end

# app/models/equipment_type.rb
class EquipmentType < ActiveRecord::Base
  has_many :equipments
  attr_accessible :name
end

The form has a dropdown with existing equipment types and when a blank option is selected, new input is shown for a new equipment type name:

#app/views/equipments/_form.html.haml
= simple_form_for [@equipment] do |f|
  = f.input :name
  = f.association :equipment_type, include_blank: "Add new"
  = f.input :new_equipment_type, input_html: {value: "New equipment type name"}, wrapper_html: {style: "#{if @equipment.equipment_type_id.present? then 'display:none;' else '' end}"}

最后用 javascript 显示/隐藏新的设备类型字段：

#app/assets/javascripts/equipments.js.coffee:
@showOrHideNewEquipmentTypeField = (drop_down) ->
  new_equipment_type = $(drop_down).closest('form').find('div.input[class*=new_equipment_type]')
  if $(drop_down).val()
    $(new_equipment_type).slideUp()
  else
    $(new_equipment_type).slideDown()

$ ->
  $('[name*=equipment_type_id]').change ->
    showOrHideNewCategoryField(@)