根据所选选项的宽度调整选择元素的宽度

我希望select元素的默认选项值的宽度更短。 当用户选择另一个选项时，select元素应调整自身大小，以便整个文本始终在元素中可见。

我已经在问题中找到了一个解决方案， 根据选择的OPTION宽度自动调整SELECT元素的大小 ，但它不能用于bootstrap，我不知道为什么。

这是我的尝试：

$(document).ready(function() { $('select').change(function(){ $("#width_tmp").html($('select option:selected').text()); // 30 : the size of the down arrow of the select box $(this).width($("#width_tmp").width()+30); }); }); 

 .btn-select { color: #333; background-color: #f5f5f5; border-color: #ccc; padding:7px; } select { width: 60px; } #width_tmp{ display : none; } 

     
 
   All Longer A very very long string...          
  

Answer 1

出现此问题的原因是#width_tmp嵌套在.input-group-btn因此它inheritance了font-size: 0; 来自bootstrap的财产。 因此，元素的计算宽度始终为零：

要解决此问题，只需移动 ，使其不在输入组内。

插件时间

更好的选择是使用插件来处理整个操作的开始。 这是我刚刚掀起的一个。

该插件动态创建并销毁该span因此它不会使您的html混乱。 这有助于区分问题，并允许您将该function委派给另一个文件，并轻松地在多个页面中重复使用多个元素。

 (function($, window){ var arrowWidth = 30; $.fn.resizeselect = function(settings) { return this.each(function() { $(this).change(function(){ var $this = $(this); // create test element var text = $this.find("option:selected").text(); var $test = $("").html(text); // add to body, get width, and get out $test.appendTo('body'); var width = $test.width(); $test.remove(); // set select width $this.width(width + arrowWidth); // run on start }).change(); }); }; // run by default $("select.resizeselect").resizeselect(); })(jQuery, window); 

您可以通过以下两种方式之一初始化插件：

1. HTML – 将类.resizeselect添加到任何select元素：

     All Longer A very very long string...  

2. JavaScript – 在任何jQuery对象上调用.resizeselect() ：

    $("select"). resizeselect () 

这是Stack Snippets中的演示：

 (function($, window){ var arrowWidth = 30; $.fn.resizeselect = function(settings) { return this.each(function() { $(this).change(function(){ var $this = $(this); // create test element var text = $this.find("option:selected").text(); var $test = $("").html(text); // add to body, get width, and get out $test.appendTo('body'); var width = $test.width(); $test.remove(); // set select width $this.width(width + arrowWidth); // run on start }).change(); }); }; // run by default $("select.resizeselect").resizeselect(); })(jQuery, window); 

 .btn-select { color: #333; background-color: #f5f5f5; border-color: #ccc; padding:7px; } 

     
 
   All Longer A very very long string...