动态选择菜单不适用于添加的字段

Question

我有一个Rails嵌套表单，其中的子字段包含动态选择菜单：--category（过滤器菜单）--products

我可以使用一个单一的字段集，但是由于无法获取.html（）来将选择数据加载到a上，所以我已经破解了产品菜单（通过以DOM准备就绪的主要形式使用“ backup” collection_select）动态场。 我使用修订后的Railscast＃88作为模板代码。

真正的问题是，只有第一个选择菜单组合才能工作-当我在其他字段集中选择类别菜单时，所有菜单都会失败。 我尝试添加一个（this）方法，但可以使其正常工作。

任何见解非常感谢！

释放js.coffee：

products = $('.products-backup').html()
$('form').on 'change', '.category', (event) ->
category = $('.category :selected').text()
escaped_category = category.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')
options = $(products).filter("optgroup[label='#{escaped_category}']").html()
if options
    $('.products').html(options)
else
    $('.products').empty()

释放rails html.erb部分-注意，我为每个选择菜单分配了：class名称：

<fieldset>
<div class="field">
<%= f.collection_select :category_id, Category.all, :id, :name, { prompt: 'Select' }, 
{ :class => "category" } %> 
</div>
<div class="field">
<%= f.grouped_collection_select :product_id, Category.order(:name), :products, 
:name, :id, :name, { prompt: 'Select' }, { :class => "products" } %>
</div>
#...more fields
</fieldset>

Answer 1

@Jeff，我想要这样的东西：

var $products_backup = $('#products_backup');
$('form').on('click', '.category', function() {
    var $category = $(this);
    if (!$category.is(":checked")) {
        return;
    }
    var escaped_category = $category.val().replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    var $options = $products_backup.find("optgroup[label='" + escaped_category + "']").find("option");
    //$('#products').empty().append('<option value="">Select an item</option>').append($options.clone()).val("");
    $category.closest('fieldset').find('.products').empty().append('<option value="">Select an item</option>').append($options.clone()).val("");
});

见：

• 演示 （原始）
• 演示 （更新）

如您所见，我猜想.category元素可能是单选按钮。 如果不是，则需要或多或少地调整代码。