如何在RoR嵌套表单中实现链式选择

How to implement chained selects in an RoR nested form?

本文关键字：实现 选择 表单 RoR 嵌套      更新时间：2023-09-26

我有一个运行Ruby 2和Rails 4的web应用程序，还有一个非常复杂的表单。问题是，嵌套资源的字段是动态创建的，并给定日期和时间的唯一组合，但在我的javascript中，我需要定义哪个select链接到哪个select。

我在概念中使用的两个教程如下：http://homeonrails.blogspot.de/2012/01/rails-31-linked-dropdown-cascading.htmlhttp://railscasts.com/episodes/196-nested-model-form-revised

但重要的代码基本上在三个不同的文件中：

  $(document).ready(function(){
    $('select#device_name').chainedTo('select#room_name');
  });

这将一个选择链接到另一个选择，并且可以在表单模板或字段部分中呈现。

helper方法如下所示：

  def link_to_add_fields(name, f, association)
    new_object = f.object.send(association).klass.new
    id = new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize + "_fields", f: builder)
    end
    link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("'n", "")})
  end

最后但同样重要的是咖啡脚本：

jQuery ->
  $('form').on 'click', '.remove_fields', (event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()
  $('form').on 'click', '.add_fields', (event) ->
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    event.preventDefault()

因此，我对其工作原理的理解是，我点击一个按钮，helper方法创建一个新的关联，获取id，从partial中渲染html，而coffee脚本只是用当前日期时间替换对象的id，这样我就可以添加多个关联，而它们没有相同的id。

问题是，如何更改链接函数的javascript，以获取选择框的id，因为现在我不知道如何创建一个动态javascript来接受coffescapet中的日期-时间，或者让javascript搜索它们并自行更改。

如有任何帮助或提示，我们将不胜感激！

嗯，解决方案正如预期的那样简单。使用以下命令可以获得嵌套资源的子索引：

<%= f.object_name.gsub(/[^0-9]+/,'') %>

这个索引可以传递到javascript中，将两个选择链接到一起：

  $(document).ready(function(){
    $('select#device_attributes_<%= f.object_name.gsub(/[^0-9]+/,'') %>_name').chainedTo('select#room_attributes_<%= f.object_name.gsub(/[^0-9]+/,'') %>_name');
  });
相关文章：