title: Filter results on index page from dropdown
body: <p>I'm using rails 3 and I have two models, venues and areas where each area has many venues and each venue belongs to one area.</p>
  
  <p>I'm trying to find a way of filtering the venue records displayed in the venue index by what area is selected in a dropdown box on the same page.</p>
  
  <p>The dropdown box currently displays all my area records as I would like but after selecting an area and clicking the submit button I would like the index page to reload and only display the partials of the venue records with the same area as the one selected in the dropdown box.</p>
  
  <p>The scopes I have in the model display the correct venues when called in the rails console or by changing the def index in the controller to @venues = Venue.north / venue.south / venue.west. I just cant figure a way to have all the venues displayed as a default but to then call each scope depending on which area is selected from the form.</p>
  
  <p>I'm not bothered with using AJAX at this point I would just like to understand how it can be done in as simple a way as possible and without using sphinx/thinking_sphinx.</p>
  
  <p>Model:</p>
  
  <pre><code>class Venue &lt; ActiveRecord::Base
    belongs_to :user
    has_many :reviews
    belongs_to :area
  
    scope :north, where(:area_id =&gt; "2")
    scope :west, where(:area_id =&gt; "3")
    scope :south, where(:area_id =&gt; "4")
  end
  </code></pre>
  
  <p>View: (venue index.html.erb)</p>
  
  <pre><code>&lt;div class="filter_options_container"&gt;
  
    &lt;form class="filter_form"&gt;
      &lt;%= select("area", "area_id", Area.all.map {|a| [a.name, a.id] }) %&gt;
      &lt;input type="submit" value="Filter" /&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div class="venue_partials_container"&gt;
    &lt;%= render :partial =&gt; 'venue', :collection =&gt; @venues %&gt;
  &lt;/div&gt;   
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>class VenuesController &lt; ApplicationController
  
    def index
      @venues = Venue.all
    end
  end
  </code></pre>
  
  <p>Any help is much appreciated.</p>