Show/hide divs based on dropdown selection - jquery
<p>So i am tryign to make a timeline, where if you select an item from a dropdown selection box it will display only the information from that selection (era). I found this <a href="http://www.tutorialrepublic.com/codelab.php?topic=faq&amp;file=jquery-show-hide-div-using-select-box" rel="nofollow">Code</a> which lets me do just that, but once i added a few thigns of my own, it stopped working. i was wondering why this is happening, and what could be done to fix it. 
Full Code:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){
$("select").change(function(){
    $(this).find("option:selected").each(function(){
        if($(this).attr("value")=="red"){
            $(".box").not(".red").hide();
            $(".red").show();
        }
        else if($(this).attr("value")=="green"){
            $(".box").not(".green").hide();
            $(".green").show();
        }
        else if($(this).attr("value")=="blue"){
            $(".box").not(".blue").hide();
            $(".blue").show();
        else if($(this).attr("value")=="maroon"){
            $(".box").not(".maroon").hide();
            $(".maroon").show();
        else if($(this).attr("value")=="magenta"){
            $(".box").not(".magenta").hide();
            $(".magenta").show();
        }
        else{
            $(".box").hide();
        }
    });
}).change();
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
    &lt;select&gt;
        &lt;option&gt;Choose Color&lt;/option&gt;
        &lt;option value="red"&gt;Red&lt;/option&gt;
        &lt;option value="green"&gt;Green&lt;/option&gt;
        &lt;option value="blue"&gt;Blue&lt;/option&gt;
        &lt;option value="maroon"&gt;maroon&lt;/option&gt;
        &lt;option value="magenta"&gt;magenta&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
&lt;div class="red box"&gt;
&lt;/div&gt;
&lt;div class="green box"&gt;hello&lt;/div&gt;
&lt;div class="blue box"&gt;talofa&lt;/div&gt;
&lt;div class="maroon box"&gt; &lt;h2&gt;BURGANDY!&lt;/h2&gt;&lt;/div&gt;
&lt;div class="magenta box"&gt; &lt;h2&gt;PINK!&lt;/h2&gt;&lt;/div&gt;
</code></pre>

<p>EDIT:
I am extremely new to JS and JQuery (Like, Never used either of them before), so explanations are appreciated! </p>