Showing/hiding hint text
<p>I've created a <code>.js</code> file with the following in it:</p>

<pre><code>$('.emailhinttext').hide();
$('select').change(function() {
if ($(this).val() == 'For yourself, your church, school, a friend etc...') {
    $('.emailhinttext').show();
}
if ($(this).val() == 'A Charity like Oxfam, Marie Curie or Help the Aged') {
    $('.emailhinttext').hide();
}
});
</code></pre>

<p>It does have a couple of other things in it (Should that matter?) and I include the file in the header of my page along with jQuery.</p>

<p>my html is:</p>

<pre><code>&lt;div class="input select"&gt;
    &lt;label for="I am raising money for"&gt;I am raising money for...&lt;/label&gt;
    &lt;select name="data[I am raising money for]" id="I am raising money for"&gt;
        &lt;option value="0"&gt;A Charity like Oxfam, Marie Curie or Help the Aged&lt;/option&gt;
        &lt;option value="1"&gt;For yourself, your church, school, a friend etc...&lt;/option&gt;
&lt;/select&gt;&lt;/div&gt;
&lt;div class="input text required"&gt;
    &lt;label for="UserEmail"&gt;Email&amp;nbsp;&amp;nbsp;&lt;div class="emailhinttext"&gt;*Please use the same email as your paypal account&lt;/div&gt;&lt;/label&gt;
    &lt;input name="data[User][email]" type="text" maxlength="255" id="UserEmail" /&gt;
&lt;/div&gt;
</code></pre>

<p>It doesn't work even though on jsfiddle something really similar works fine. What am I doing wrong?</p>
