How can I have a div appear option class is selected within <select>?
<p>So, I want to show a <code>div</code> only if one of the option classes with the class <code>warning</code> is selected. I'm trying to do it with something like the following: </p>

<p>HTML:</p>

<pre><code>&lt;select id="country"&gt;
    &lt;option class="warning" value="1"&gt;Option 1&lt;/option&gt;
    &lt;option class="warning" value="2"&gt;Option 2&lt;/option&gt;
    &lt;option class="noWarning" value="3"&gt;Option 3&lt;/option&gt;
    &lt;option class="warning" value="4"&gt;Option 4&lt;/option&gt;
    &lt;option class="noWarning" value="5"&gt;Option 5&lt;/option&gt;
    &lt;option class="warning" value="6"&gt;Option 6&lt;/option&gt;    
&lt;/select&gt;

&lt;div id="hiddendiv" style="display:none"&gt;
    Test
&lt;/div&gt;
</code></pre>

<p>Script:    </p>

<pre><code>$('#country').change(function(){
    if ($(this).attr('class') == 'warning'){
        $('#hiddendiv').show();
    }else if ($(this).attr('class') == 'nowarning'){
        $('#hiddendiv').hide();
    }
});
</code></pre>

<p>I know I need to somehow call the option class instead as it's just finding the class of the select box at the moment, I think.</p>