title: Ruby-on-Rails-6: Dynamic Cascading Dropdown not working
body: <p>I've gone through several websites and resources and I can't seem to get dynamic cascading dropdown to work following guides or anything. One common theme I see is that all guides and help are for Rails 5 or older and I'm using Rails 6, so not sure if 6 isn't compatible with those solutions.</p>
  <p>I have the following models:</p>
  <p><strong>Organization</strong></p>
  <pre><code>  class Organization &lt; ApplicationRecord
  
        has_many :org_ratings, dependent: :destroy
  
    end
  </code></pre>
  <p><strong>OrgRating</strong></p>
  <pre><code>class OrgRating &lt; ApplicationRecord
  
    belongs_to :organization
  
  end
  </code></pre>
  <p>Then I have a form for &quot;RATING&quot; which tracks the OrgRating and Organization from the models above.</p>
  <pre><code>&lt;%= form_with(model: rating, local: true) do |f| %&gt;
    &lt;div class=&quot;col-6&quot;&gt;
      &lt;%= f.collection_select :organization_id, Organization.order(:name), :id, :name,{},{ class: &quot;custom-select&quot; } %&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;col-6&quot;&gt;
      &lt;%= f.grouped_collection_select :rating_id, Organization.order(:name), :org_ratings, :name, :id, :rating, {},{ class: &quot;custom-select&quot; } %&gt;
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  <p>I followed this tutorial (<a href="http://railscasts.com/episodes/88-dynamic-select-menus-revised" rel="nofollow noreferrer">http://railscasts.com/episodes/88-dynamic-select-menus-revised</a>) and this was the JS file i created (I read that coffee is not supported in Rails 6 and web packer plays nice with JS)</p>
  <p><strong>app/javascript/packs/rating.js</strong></p>
  <pre><code>jQuery(function() {
    $('#rating_rating_id').parent().hide();
    ratings = $('#rating_rating_id').html();
    return $('#rating_organization_id').change(function() {
      organization = $('#rating_organization_id :selected').text();
      escaped_organization = organization.replace(/([ #;&amp;,.+*~\':&quot;!^$[\]()=&gt;|\/@])/g, '\\$1');
      options = $(ratings).filter(`optgroup[label='${escaped_organization}']`).html();
      if (options) {
        $('#rating_rating_id').html(options);
        return $('#rating_rating_id').parent().show();
      } else {
        $('#rating_rating_id').empty();
        return $('#rating_rating_id').parent().hide();
      }
    });
  });
  </code></pre>
  <p>Thanks for any direction and apologize in advance for my lack of knowledge.</p>