Applying text-transform css property using JQuery
<p>My code looks like below, I type something in textbox, then change the dropdowns to <strong>UPPERCASE</strong> etc, all works great but when i select <strong>"Small Caps"</strong> from drop down nothing happens, i tried changing the drop down property to variant but its still not working, not sure what the issue is</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt; - test &lt;/title&gt;

&lt;script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'&gt;&lt;/script&gt;

&lt;script type='text/javascript'&gt;
$(window).load(function(){

         $('#ta1').keyup(function(){
                $('#float1').html("&lt;p&gt;"+$(this).val()+"&lt;/p&gt;");
            });

            $("#size").change(function() {
                $('#float1').css("text-transform", $(this).val());
            });
});


&lt;/script&gt;


&lt;/head&gt;
&lt;body&gt;
  &lt;form id="myform"&gt;



      &lt;label&gt;Font Style&lt;/label&gt;
      &lt;select id="size" &gt;
&lt;option value="0"&gt;[No Engraving]&lt;/option&gt;
&lt;option value="variant"&gt;Small Caps&lt;/option&gt;
&lt;option value="uppercase"&gt;All Caps&lt;/option&gt;
&lt;option value=" lowercase"&gt;No Caps&lt;/option&gt;
&lt;option value="capitalize"&gt;Normal&lt;/option&gt;
&lt;/select&gt;
    &lt;/p&gt;


 &lt;/form&gt; 
  &lt;p&gt;
      &lt;label&gt;Top Leg
      &lt;input type="text" name="top_leg" id="ta1" class="changeMe" maxlength="10"&gt;(10 char, $1)
      &lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
     &lt;label&gt;&lt;/label&gt;
&lt;/p&gt;
&lt;!--Start top leg Div--&gt; 

&lt;div id="container" class="changeMe2" style=" left: 298px;
    position: absolute;
    top: 287px;
    z-index: 999;"&gt;
        &lt;div id="float1"&gt;
            &lt;p&gt;

            &lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;!--Stop top leg Div--&gt; 


&lt;/html&gt;


&lt;div&gt;
&lt;/body&gt;
</code></pre>
