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

Javascript 如何在RoR嵌套表单中实现链式选择?,javascript,jquery,ruby-on-rails,nested-forms,chained,Javascript,Jquery,Ruby On Rails,Nested Forms,Chained,我有一个运行Ruby 2、Rails 4和相当复杂的表单的web应用程序。我要做的是将嵌套表单与链式选择组合起来。问题在于,嵌套资源的字段是动态创建的,并且给出了日期和时间的唯一组合,但在我的javascript中,我需要定义哪个选择链接到哪个其他选择 我的概念中使用的两个教程如下: 但重要的代码基本上存在于三个不同的文件中: $(document).ready(function(){ $('select#device_name').chainedTo('select#room_n

我有一个运行Ruby 2、Rails 4和相当复杂的表单的web应用程序。我要做的是将嵌套表单与链式选择组合起来。问题在于,嵌套资源的字段是动态创建的,并且给出了日期和时间的唯一组合,但在我的javascript中,我需要定义哪个选择链接到哪个其他选择

我的概念中使用的两个教程如下:

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

  $(document).ready(function(){
    $('select#device_name').chainedTo('select#room_name');
  });
这会将一个选择链接到另一个选择,并可以在表单模板或字段中呈现

助手方法如下所示:

  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,从coffescript接受日期时间,或者让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');
  });