Here's a plugin I just wrote for [this question][1] that dynamically creates and destroys a mock `span` so it doesn't clutter up your html. This helps separate concerns, lets you delegate that functionality, and allows for easy reuse across multiple elements.

Include this JS anywhere:

```js
(function($, window){
  $(function() {
    let arrowWidth = 30;

    $.fn.resizeselect = function(settings) {  
      return this.each(function() { 

        $(this).change(function(){
          let $this = $(this);

          // get font-weight, font-size, and font-family
          let style = window.getComputedStyle(this)
          let { fontWeight, fontSize, fontFamily } = style

          // create test element
          let text = $this.find("option:selected").text();
          let $test = $("<span>").html(text).css({
            "font-size": fontSize, 
            "font-weight": fontWeight, 
            "font-family": fontFamily,
            "visibility": "hidden" // prevents FOUC
          });

          // add to body, get width, and get out
          $test.appendTo($this.parent());
          let width = $test.width();
          $test.remove();

          // set select width
          $this.width(width + arrowWidth);

          // run on start
        }).change();

      });
    };

    // run by default
    $("select.resizeselect").resizeselect();                       
  })
})(jQuery, window);
```

You can initialize the plugin in one of two ways:

1. **HTML** - Add the class `.resizeselect` to any select element:

    
    
    <pre><code>&lt;select class=&quot;btn btn-select <b>resizeselect</b>&quot;&gt;
      &lt;option&gt;All&lt;/option&gt;
      &lt;option&gt;Longer&lt;/option&gt;
      &lt;option&gt;A very very long string...&lt;/option&gt;
    &lt;/select&gt;
    </code></pre>

2. **JavaScript** - Call `.resizeselect()` on any jQuery object:

    
    
    <pre><code>$("select").<b>resizeselect</b>()</code></pre>

### Demo in [jsFiddle][2] and StackSnippets:





    (function($, window){
      $(function() {
        let arrowWidth = 30;

        $.fn.resizeselect = function(settings) {  
          return this.each(function() { 

            $(this).change(function(){
              let $this = $(this);

              // get font-weight, font-size, and font-family
              let style = window.getComputedStyle(this)
              let { fontWeight, fontSize, fontFamily } = style

              // create test element
              let text = $this.find("option:selected").text();
              let $test = $("<span>").html(text).css({
                "font-size": fontSize, 
                "font-weight": fontWeight, 
                "font-family": fontFamily,
                "visibility": "hidden" // prevents FOUC
              });

              // add to body, get width, and get out
              $test.appendTo($this.parent());
              let width = $test.width();
              $test.remove();

              // set select width
              $this.width(width + arrowWidth);

              // run on start
            }).change();

          });
        };

        // run by default
        $("select.resizeselect").resizeselect();                       
      })
    })(jQuery, window);



    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

    <select class="resizeselect">
      <option>All</option>
      <option>Longer</option>
      <option>A very very long string...</option>
    </select>



**Updated** to include sizing suggestions from [Garywoo][Gary] & [Eric Warnke][Eric]

[1]: https://stackoverflow.com/q/28308103/1366033
[2]: https://jsfiddle.net/KyleMit/3sx64k3a/
[Gary]:https://stackoverflow.com/questions/20091481/auto-resizing-the-select-element-according-to-selected-options-width#comment67907528_28310736
[Eric]: https://stackoverflow.com/questions/20091481/auto-resizing-the-select-element-according-to-selected-options-width#comment79206587_28310736

I've got this `select` element with different `option` in it. Normally the `select` element would get its width from the biggest `option` element, but I want the `select` element to have the default `option` value's width which is shorter. When the user selects another `option`, the `select` element should resize itself so the whole text is always visible in the element.

    $(document).ready(function() {
        $('select').change(function(){
            $(this).width($('select option:selected').width());
        });
    });

Problem:

 - On Chrome (Canary) it always gets a width returned of 0.
 - On Firefox the width get's added and not resized when selected a shorter option.
 - Safari: Same result as Chrome.

[Demo @ JSFiddle][1] 


  [1]: http://jsfiddle.net/zERB7/1/