Skip to main content

Dynamic select boxes with Rails 4

Javascript • Asked by John Munyi

Hey there I am trying out a dynamic select box with rails 4 and I am stuck on where to put the js code because the form exists in a nested form. So should the code go in the js file for the form accepting nested attributes or to the js file named as the partial of the data.

see my partial code below and js as well


     <h4 style="text-align: center">Select Job Queue</h4><br>
           <div id="project_queue_id" class="field">
             <%= f.label :project_name %><br>
             <%= f.collection_select(:project_id, Project.order(:project_name), :id, :project_name, include_blank: true) %>
           <div id="job_queue_id"class="field">
           <%= f.label :job_name %><br>
             <%= f.grouped_collection_select(:job_id, Project.order(:project_name), :jobs,  :project_name, :id, :job_name, include_blank: true) %>

  jQuery ->
    jobs = $('#job_queue_id').html()
    $('#project_queue_id').change ->
     project = $('#project_queue_id :selected').text()
       options = $(jobs).filter("optgroup[label='#{project}']").html
     if options

Will appreciate any pointers, I am not getting any errors but the data is not getting filtered as well

Hey John,

Any Javascript code you write inside the app/assets/javascripts folder gets included globally and is generally where you want to keep your code. It doesn't matter if you're using a regular form or a nested one, the JS won't care which is good for situations like this.

You might want to double check that you've got the right IDs for your fields because their names can change when you do nested forms. That is likely the reason that you're not getting any data filtered. Inspect the HTML on the page and make sure those form field ID's match up to your JS. With any luck, that hopefully fixes it!

Hi chris,

The issue is with how the form fields are added , I am using gem cocoon and they have an in built method to help sort that out ..

     cocoon:before-insert: called before inserting a new nested child
     cocoon:after-insert: called after inserting
     cocoon:before-remove: called before removing the nested child
     cocoon:after-remove: called after removal

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 27,623+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.