title: Auto resizing the SELECT element according to selected OPTION's width
body: <p>I've got this <code>select</code> element with different <code>option</code> in it. Normally the <code>select</code> element would get its width from the biggest <code>option</code> element, but I want the <code>select</code> element to have the default <code>option</code> value's width which is shorter. When the user selects another <code>option</code>, the <code>select</code> element should resize itself so the whole text is always visible in the element.</p>
  
  <pre><code>$(document).ready(function() {
      $('select').change(function(){
          $(this).width($('select option:selected').width());
      });
  });
  </code></pre>
  
  <p>Problem:</p>
  
  <ul>
  <li>On Chrome (Canary) it always gets a width returned of 0.</li>
  <li>On Firefox the width get's added and not resized when selected a shorter option.</li>
  <li>Safari: Same result as Chrome.</li>
  </ul>
  
  <p><a href="http://jsfiddle.net/zERB7/1/" rel="noreferrer">Demo @ JSFiddle</a> </p>