Auto resizing the SELECT element according to selected OPTION’s width

by

You are right there is no easy or built-in way to get the size of a particular select option. Here is a JsFiddle that does what you want.

It is okay with the latest versions of Chrome, Firefox, IE, Opera and Safari.

I have added a hidden select #width_tmp_select to compute the width of the visible select #resizing_select that we want to be auto resizing. We set the hidden select to have a single option, whose text is that of the currently-selected option of the visible select. Then we use the width of the hidden select as the width of the visible select. Note that using a hidden span instead of a hidden select works pretty well, but the width will be a little off as pointed out by sami-al-subhi in the comment below.

$(document).ready(function() {
  $('#resizing_select').change(function(){
    $("#width_tmp_option").html($('#resizing_select option:selected').text()); 
    $(this).width($("#width_tmp_select").width());  
  });
});
#resizing_select {
  width: 50px;
} 
 
#width_tmp_select{
  display : none;
} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>

<select id="resizing_select">
  <option>All</option>
  <option>Longer</option>
  <option>A very very long string...</option>
</select>

<select id="width_tmp_select">
  <option id="width_tmp_option"></option>
</select>

More Related Contents:

  1. jQuery Adding new option to select element doesn't pick up the string [closed]
  2. jQuery get value of select onChange
  3. Why does the jquery change event not trigger when I set the value of a select using val()?
  4. Use jQuery to change a second select list based on the first select list option
  5. Click event on select option element in chrome
  6. jQuery: Best practice to populate drop down?
  7. Best way to unselect a in jQuery?
  8. Using jQuery To Get Size of Viewport
  9. How to make the first option of selected with jQuery
  10. jQuery : remove element except inside element
  11. auto resize text (font size) when resizing window?
  12. Resizable table columns with jQuery [closed]
  13. Resize event firing multiple times while dragging the resize handle
  14. How do you resize Fancybox at runtime?
  15. jQuery Animation – Smooth Size Transition
  16. Selecting text on focus using jQuery not working in Safari and Chrome
  17. Populate Select box options on click with Javascript/Jquery with Json data
  18. jquery resize listener on a div
  19. Get index of selected option with jQuery
  20. Get SELECT’s value and text in jQuery [duplicate]
  21. Jquery- Get the value of first td in table
  22. Disable select options based on value *through the HTML only!*
  23. Unselect what was selected in an input with .select()
  24. Custom CSS to allow chrome textarea resize smaller than initial state?
  25. jQuery onchange/onfocus select box to display an image?
  26. JQuery :contains function limit to exact match
  27. how to serialize all img tags with Jquery
  28. Correct way of using JQuery-Mobile/Phonegap together?
  29. How to add a ‘submitHandler’ function when using jQuery Unobtrusive Validation?
  30. Datatable date sorting dd/mm/yyyy issue

Leave a Comment