Hide a div based on a select input box
<p>I was helped with some code <a href="http://jsfiddle.net/K9zGP/13/" rel="nofollow">here</a>. I tweaked it to try and hide a whole div instead of an element. It was only a small tweak but I seem to have done something to stop it working.</p>

<p>HTML</p>

<pre><code>&lt;input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40"&gt;
&lt;div id="added_fields"&gt;
    &lt;select name="menu-168" class="wpcf7-validates-as-required"&gt;
        &lt;option value="Residential"&gt;Residential&lt;/option&gt;
        &lt;option value="Commercial"&gt;Commercial&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>JS</p>

<pre><code>if ($("select[name='menu-168']").val() == "Commercial") {
    $("#added_fields").addClass("hidden");
}​
</code></pre>

<p>Would someone be kind enough to tell me where I have gone wrong?</p>
