动态选择菜单不加场

Question

我有一个Rails嵌套形式包含动态选择菜单中的子领域的工作： --category（过滤菜单） - 产品

我可以得到一个字段集工作，但我已经破解了产品菜单（通过使用DOM备份的主要形式的“备份”collection_select），因为我无法使用.html（）在动态字段上加载选择数据。我使用修订的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() 

培训相关的轨道html.erb部分 - 注意，我分配：类名给每个选择菜单：

<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(""); 
}); 

参见：

• DEMO（原件）
• DEMO（更新）

正如你将看到我猜到是.category元素可能是单选按钮。如果不是，那么代码将需要或多或少地进行调整。