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

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.

app/models/slab.rb

      class Slab < ActiveRecord::Base

        ...
         belongs_to :tree
        ...
        belongs_to :thick_dict
        ...
        end

app/models/tree.rb

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

app/models/thick_dict.rb

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

app/views/slabs/_form.html.erb

        <%= 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>

apps/assets/javascript/slabs.js

jQuery(function() {
  var thick_dicts = $('#slab_thick_dict_id').html();
  console.log(thick_dicts);
  return $('#slab_tree_id').change(function() {
    var tree, options;
    tree = $('#slab_tree_id :selected').text();
    options = $(thick_dicts).filter("optgroup[label=" + tree + "]").html();
    console.log(options);
    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.

console.log(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.