具有级联选择的Rails动态表单

Question

我正在尝试实现一些嵌套的表单元素，这些元素的值基于主窗体中的选择框值。现在，当我在主窗体中进行选择时，它会更改当前显示的所有嵌套窗体中显示的值，但是当我单击按钮添加新的嵌套窗体元素时，新窗体元素将显示不基于的值在主要选择上。我需要的是，只要单击按钮添加新的嵌套表单，该表单中的值应该基于主表单中的选择框。

以下是步骤和发生的事情：

以下是步骤和预期结果：

这是我的偏见。这是单击“新建”按钮时显示的内容：

<tr class="details_row nested-fields">
  <td><%= f.select :area_id, options_for_select(@areas.collect {|c| [ c.area_name, c.id ] }), {include_blank: true}, {:class => 'form-control area_select'} %></td>
  <td><%= f.select :product_id, options_for_select(@products.collect {|p| [ p.product_number, p.id ] }), {include_blank: true}, {:class => 'form-control product_select'} %></td>
  <td><%= f.number_field :quantity, class: 'form-control', "min" => 1 %></td>
  <td><%= f.select :accessory_id, options_for_select(@accessories.collect {|p| [ p.product_number, p.id ] }), {include_blank: true}, {:class => 'form-control accessory_select'} %></td>
  <td><%= f.text_field :notes, class: 'form-control' %></td>
  <td><%= link_to_remove_association '<i class="fa fa-trash"></i>'.html_safe, f %></td>
</tr>

所有这些操作都是在我创建新记录的时候，这是我的控制器为新方法编写的代码：

  def new
    if current_user
      @estimate = Estimate.new
      @estimate.estimate_details.build
      @default_user = current_user.id
      @product_type = 3
      @areas = Area.where("product_type_id = ?", @product_type)
      @products = Product.select("product_number, id").where("product_type_id = ? AND active = 't' ", @product_type)
      @accessories = Product.select("product_number, id").where("product_type_id = ? AND active = 't' AND accessory = 't'", @product_type)
    else
      redirect_to root_path, notice: 'You are not logged in.'
    end
  end

这是来自控制器（与上面的新控制器相同的控制器）更新选择框的方法：

  def update_select
    @product_type = params[:product_type_id]
    @areas = Area.where("product_type_id = ?", params[:product_type_id])
    @products = Product.where("product_type_id = ? AND active = 't'", params[:product_type_id])
    @accessories = Product.where("product_type_id = ? AND active = 't' AND accessory = 't'", params[:product_type_id])
    respond_to do |format|
      format.js
    end
  end

我原以为@product_type将被设置为控制器的“new”方法中的默认值。当运行update_select方法时，它应该更新@product_type，这将在创建新元素时使用...但是这不起作用。

更新

这是我的update_select.js。这会更新嵌套表单中的三个选择框，但我必须添加一个动态表单，然后在主表单选择框中进行选择，以使字段对于新添加的表单详细信息是正确的。

$(".area_select").empty().append("<%= escape_javascript(render(partial: "select_boxes/area", collection: @areas)) %>")
$(".product_select").empty().append("<%= escape_javascript(render(partial: "select_boxes/product", collection: @products)) %>")
$(".accessory_select").empty().append("<%= escape_javascript(render(partial: "select_boxes/accessory", collection: @accessories)) %>")

以下是上述js引用的部分内容： 附件：

<option value="<%= accessory.id %>"><%= accessory.product_number %></option>

产品：

<option value="<%= product.id %>"><%= product.product_number %></option>

区域：

<option value="<%= area.id %>"><%= area.area_name.titleize %></option>

这里的好处是触发update_select

的脚本

$ ->
  $(document).on 'change', '#product_type_select', (evt) ->
    $.ajax
      url:'/estimates/new/update_select',
      type: 'GET',
      dataType: 'script',
      data: {
        product_type_id: $("#product_type_select option:selected").val()
      }
      error: (jqXHR, textStatus, errorThrown) ->
        console.log("AJAX Error: #{textStatus} #{errorThrown}")
      success: (data, textStatus, jqXHR) ->
        console.log("Dynamic area select OK!")