title: How to use dynamic dropdowns as a filter for searching in rails
body: <p>I am trying to implement 3 dropdowns as an additional filter for my search functionality. I have a model called Bottle and this model has 3 columns: category, country and grape. Furthermore, I have implemented a dropdown for each column in my view that should act as a filter for my search. Now I want the dropdowns to be dynamic meaning that if I select for the first dropdown  (category dropdown) 'red wine', it only shows me countries in my model that have bottles categorized as red wine. The same should again be true for the third dropdown, i.e. it should only show grapes that are categorized as 'red wine'.</p>
  
  <p>So far I have defined the second dropdown by filtering my model with the input of the first dropdown. The third dropdown is filtered with the input of the second dropdown. The problem I am facing now is that I cant seem to pass in the value of my first dropdown to the definition of my third dropdown in order to make sure that only those grapes are shown that also match the category and not only the country. You can see in my code that I've tried to pass in the params[:category_name] for the definition of my third dropdown, however this doesn't seem to work. </p>
  
  <p>I would appreciate any hints on how to solve this problem and since I am new to rails in general I would like to ask if there is any better way of doing this?</p>
  
  <p>My view looks like this:</p>
  
  <pre><code>&lt;%= form_tag("filter", :id =&gt; "filter_form", :method =&gt; "post") do %&gt;
    &lt;label for="kategorie" class="kategorie"&gt;Kategorie:&lt;/label&gt; &lt;%=  select_tag :category,
        options_for_select(Bottle.pluck(:category).uniq.sort_by!{ |e| e.downcase }, params[:category]),
        { include_blank: 'Alle Kategorien' }%&gt;
    &lt;label for="country" class="country"&gt;Herkunft:&lt;/label&gt; &lt;%=  select_tag :country,
        options_for_select(Bottle.pluck(:country).uniq.sort_by!{ |e| e.downcase }, params[:country]),
        { include_blank: 'Alle Länder' }%&gt;
    &lt;label for="grape" class="grape"&gt;Rebsorte:&lt;/label&gt; &lt;%=  select_tag :grape,
        options_for_select(Bottle.pluck(:grape).uniq.sort_by!{ |e| e.downcase }, params[:grape]),
        { include_blank: "Alle Rebsorten" }%&gt;
  &lt;%end%&gt;
  </code></pre>
  
  <p>So far I've been using AJAX. I have been able to make the second dropdown dependent on the first by using this code:</p>
  
  <p><strong>AJAX</strong></p>
  
  <pre><code>   $(document).ready(function() {
          $('#country').change(function() {
              $.ajax({
                 url: "&lt;%= update_text_path %&gt;",
                 data: {
                     country_name: $("#country option:selected").text()
                 },
                 dataType: "script"
              });                                  
          });               
          $('#category').change(function() {
              $.ajax({
                 url: "&lt;%= update_category_path %&gt;",
                 data: {
                     category_name: $("#category option:selected").text()
                 },
                 dataType: "script"
              });
          });
        });
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>def update_text
  
          if (params[:country_name] != "Alle Länder" and params[:category_name] = "Alle Kategorien")
          @rebsorten = Bottle.where(country: params[:country_name]).pluck(:grape).uniq
          @rebsorten.sort_by!{ |e| e.downcase }
          @rebsorten.unshift("Alle Rebsorten")
  
          elsif  (params[:country_name] != "Alle Länder" and params[:category_name] != "Alle Kategorien") 
          @rebsorten = Bottle.where(country: params[:country_name], category: params[:category_name] ).pluck(:grape).uniq
          @rebsorten.sort_by!{ |e| e.downcase }
          @rebsorten.unshift("Alle Rebsorten")
          end 
      end
  
  def update_category
        $selected_category = params[:category_name]
       if   params[:category_name] != "Alle Kategorien"
            @country = Bottle.where(category: params[:category_name]).pluck(:country).uniq
            @country.sort_by!{ |e| e.downcase }
            @country.unshift("Alle Länder")
        elsif (params[:category_name] == "Alle Kategorien" or params[:category] == "Alle Kategorien")
            @country = Bottle.order(:country).pluck(:country).uniq
            @country.sort_by!{ |e| e.downcase }
            @country.unshift("Alle Länder")
  
        end
    end 
  </code></pre>
  
  <p><strong>update_text.js.erb</strong></p>
  
  <pre><code>$('#grape').html("&lt;%= escape_javascript options_for_select(@rebsorten, {include_blank: true})%&gt;");
  </code></pre>
  
  <p><strong>update_categories.js.erb</strong></p>
  
  <pre><code>$('#country').html("&lt;%= escape_javascript options_for_select(@country, {include_blank: true})%&gt;");
  </code></pre>
  
  <p>Thank you very much!</p>