Question

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

我可以使用单个字段集，但是我已经破解了产品菜单（通过使用DOM准备好的主窗体中的“备份”collection_select）因为我无法获取.html（）来加载选择动态字段上的数据。我使用修改后的Railscast＃88作为模板代码。

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

任何见解都非常感谢！

Relevent 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()

Relevent rails html.erb partial - note，我指定：每个选择菜单的类名：

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

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

1 个答案: