filter "items" with Jquery via a Dropdown <p>I currently have Dropdown at the top of the page and a long list (83 boxes in rows of 4) underneath it.</p> <p>Here is the scenario:</p> <p>I select a state from the list of states in the dropdown, and the item in the list that do not match the state fade out allowing the matching items to "pop up" to the top. Once you go back to the default, all the others fade back in.</p> <p>If there are no matching items to a state, I would display a message "no options found"</p> <p>I am pretty sure I have seen this done on portfolios somewhere, but I really have no clue on how to achieve this. Does anyone have an idea on how to implement this, or can point me in the right direction?</p> <pre><code>&lt;select id="filter" name="filter"&gt; &lt;option value="-1"&gt;Filter items&lt;/option&gt; &lt;option value="sc"&gt;South Carolina&lt;/option&gt; &lt;option value="nc"&gt;North Carolina&lt;/option&gt; &lt;/select&gt; &lt;div id="container"&gt; &lt;div class="box state-nc"&gt;&lt;/div&gt; &lt;div class="box state-sc"&gt;&lt;/div&gt; &lt;div class="box state-nc"&gt;&lt;/div&gt; &lt;div class="box state-sc"&gt;&lt;/div&gt; &lt;div class="box state-nc"&gt;&lt;/div&gt; &lt;div class="box state-sc"&gt;&lt;/div&gt; &lt;div class="box state-nc"&gt;&lt;/div&gt; &lt;div class="box state-sc"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>