0

我有一个包含动态选择菜单的子字段的 Rails 嵌套表单：--category (filter menu) --products

我可以让单个字段集工作，但我已经破解了产品菜单（通过在主表单中使用 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()

相关 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>
4

1 回答 1

0

@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元素可能是单选按钮。如果不是，那么代码将需要或多或少地进行调整。

于 2012-05-12T17:06:55.743 回答