title: Have only the currently selected and displayed option in a select menu formatted in uppercase
body: <p>Lets say I have a select option list like this</p>
  
  <pre><code>&lt;select&gt;
  &lt;option selected&gt;Bear&lt;/option&gt;
  &lt;option&gt;Tiger&lt;/option&gt;
  &lt;option&gt;Lion&lt;/option&gt;
  &lt;option&gt;Porcupine&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>When the menu is 'inactive' and simply displaying the selected option, I want it to appear uppercase:</p>
  
  <pre><code>ie  BEAR \/
  </code></pre>
  
  <p>and when the menu is opened it should keep the options in their native format</p>
  
  <pre><code>Bear
  Tiger
  Lion
  Porcupine 
  </code></pre>
  
  <p>I know you can style all options to uppercase with css, but then when the menu is opened, all the options will be uppercase. </p>
  
  <p>So I'm thinking jQuery. </p>
  
  <p>Perhaps some replace function. </p>
  
  <p>I've tried something close to this, but can't get it working:</p>
  
  <pre><code>$("select option:selected").text(t.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase( ); }))
  </code></pre>
  
  <p>I've also attached it to a select change event. </p>
  
  <p>Can someone help me pull this all together?</p>