title: Applying text-transform css property using JQuery
body: <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>