JQuery fails to set the correct value of select

This is the markup:

<select id="fontsize">
    <option value="8pt"&g开发者_StackOverflow中文版t;8pt</option>
    <option value="10pt">10pt</option>
    <option value="12pt">12pt</option>
    <option value="14pt">14pt</option>
    <option value="18pt">18pt</option>
    <option value="24pt">24pt</option>
    <option value="36pt">36pt</option>
</select>

and I have this in ready function:

$(document).ready(function(){

    // init
    $('#fontsize').val(font_size);
    ...
});

and fontsize is a global variable set to '14pt'

<script type="text/javascript">
var font_size = '14pt';
...

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

Live page here. Link updated

Your "14pt" is set when you ask for it but the call to columnize seems to reinit all elements (use Firebug breakpoints to see code execution step by step). Trying to call columnize() before seems to fix the problem.

$('#ipsum').columnize({columns:nc}); 
$('#fontsize').val(font_size);
set_style();