Ask A Question


You’re not receiving notifications from this thread.

Dynamic select boxes - like railscast 88 - but it ain't working

Aaron Taddiken asked in Rails

I am trying to scope a form selection list to from another select box selection. The select box groups the options correctly in the dropdown. Everything checks out in the console but it still does not scope.


      class Slab < ActiveRecord::Base

         belongs_to :tree
        belongs_to :thick_dict


    class Tree < ActiveRecord::Base
    has_many :thick_dicts
    has_many :slabs, dependent: :restrict_with_exception


    class ThickDict < ActiveRecord::Base
    belongs_to :tree
    has_many :slabs, dependent: :restrict_with_exception


        <%= f.grouped_collection_select :thick_dict_id, Tree.order(:name).where(client_id: current_user.client), :thick_dicts, :name, :id, :display_name, include_blank: true %><br>


jQuery(function() {
  var thick_dicts = $('#slab_thick_dict_id').html();
  return $('#slab_tree_id').change(function() {
    var tree, options;
    tree = $('#slab_tree_id :selected').text();
    options = $(thick_dicts).filter("optgroup[label=" + tree + "]").html();
    if (options) {
      return $('#slab_thick_dict_id').html(options);
    } else {
      return $('#slab_thick_dict_id').empty();

Hey Aaron,

What exactly is it that isn't working correctly? You said that it logs things in the console correctly, which I assume means that every time you change the first select, you always get it to log the correct options for the second one?

If those are the right options being printed from the second console.log in the change event, then maybe the problem is just the html call to replace the options?


Hi Chris,

Actually I take that back...Looks like it is not scoping in the logs. It has all the options.


    slabs.self-c2aef00….js?body=1:3 <option value=""></option>
<optgroup label="American Elm"><option selected="selected" value="6">8/4</option>
<option value="8">4/4</option>
<option value="9">6/4</option>
<option value="16">11/4</option></optgroup><optgroup label="Black Locust"><option value="10">12/4</option></optgroup><optgroup label="Black Walnut  "></optgroup><optgroup label="Boxelder"></optgroup><optgroup label="Butternut"><option value="7">11/4</option></optgroup><optgroup label="Catalpa"><option value="14">4/4</option></optgroup><optgroup label="Cedar"></optgroup><optgroup label="English Elm"></optgroup><optgroup label="Hackberry"></optgroup><optgroup label="Honeylocust"></optgroup><optgroup label="Mulberry "><option value="11">4/4</option>
<option value="12">12/4</option></optgroup><optgroup label="Siberian Elm"><option value="15">10/4</option></optgroup><optgroup label="Silver maple"><option value="13">8/4</option></optgroup><optgroup label="Tree of Heaven"><option value="17">8/4</option></optgroup>

Interesting, so that would mean that your filter is likely the piece that's not working correctly. You may want to also console.log tree so that you can see what that string is and verify that filter is working. I'd guess there's something up with that.


Ok, yes you are correct. I got a syntax error which was easliy fixed with single quotes around options = $(thick_dicts).filter("optgroup[label=' + tree + ']").html();

However, now once a tree is selected there are no thick_dict options showing up in the list. They do still show in the console.

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 83,038+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.