JQuery fails to set the correct value of select
<p>This is the markup:</p>

<pre><code>&lt;select id="fontsize"&gt;
    &lt;option value="8pt"&gt;8pt&lt;/option&gt;
    &lt;option value="10pt"&gt;10pt&lt;/option&gt;
    &lt;option value="12pt"&gt;12pt&lt;/option&gt;
    &lt;option value="14pt"&gt;14pt&lt;/option&gt;
    &lt;option value="18pt"&gt;18pt&lt;/option&gt;
    &lt;option value="24pt"&gt;24pt&lt;/option&gt;
    &lt;option value="36pt"&gt;36pt&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>and I have this in <code>ready</code> function:</p>

<pre><code>$(document).ready(function(){

    // init
    $('#fontsize').val(font_size);
    ...
});
</code></pre>

<p>and fontsize is a global variable set to '14pt'</p>

<pre><code>&lt;script type="text/javascript"&gt;
var font_size = '14pt';
...
</code></pre>

<p>but when the page is viewed, the select shows the first option ('8pt'). In firebug console the same instruction, <code>$('#fontsize').val(font_size);</code>, successfully changes the select; why is is failing in <code>ready</code>?</p>

<p>Live page <a href="http://jqeedu.tuxfamily.org/speed_read/do_practice.php?file=3.txt" rel="nofollow">here</a>.
<strong>Link updated</strong></p>
