Home/ Questions/Q 7935585
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T21:58:03+00:00

I have a Rails nested form with the child fields that contain dynamic select

  • 0

I have a Rails nested form with the child fields that contain dynamic select menus:
–category (filter menu)
–products

I can get a single fieldset to work, but I have hack the products menu (by using a “backup” collection_select in main form that is DOM ready) because I couldn’t get the .html() to load the select data on a dynamic field. I’m using the revised Railscast #88 as the template code.

The real issue is that only the first select menu combo work — when I select the category menu in additional fieldsets, all menus fail. I tried adding a (this) method, but could get it to work.

Any insights greatly appreciated!

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, I assigned :class names to each select menu:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @Jeff, you my want something like this:

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

    See :

    As you will see I guessed that the .category elements might be radio buttons. If they are not, then the code will need to be adjusted to a greater or lesser extent.

    • 0