jquery - 根据所选 OPTION 的宽度自动调整 SELECT 元素的大小

Question

我有这个 select 元素，里面有不同的 option。通常 select 元素会从最大的 option 元素获取其宽度，但我希望 select 元素具有默认的 option 值的宽度较短。当用户选择另一个 option 时，select 元素应自行调整大小，以便整个文本始终在该元素中可见。

$(document).ready(function() {
    $('select').change(function(){
        $(this).width($('select option:selected').width());
    });
});

问题:

• 在 Chrome (Canary) 上，返回的宽度始终为 0。
• 在 Firefox 上，当选择较短的选项时，宽度会被添加并且不会调整大小。
• Safari:与 Chrome 的结果相同。

Demo @ JSFiddle

Answer 1

你是对的，没有简单或内置的方法来获取特定选择选项的大小。这是一个 JsFiddle那就是你想要的。

可以使用最新版本的 Chrome、Firefox、IE、Opera 和 Safari。

我添加了一个隐藏选择 #width_tmp_select 来计算我们想要自动调整大小的可见选择 #resizing_select 的宽度。我们将隐藏的选择设置为具有单个选项，其文本是可见选择的当前选中选项的文本。然后我们使用隐藏选择的宽度作为可见选择的宽度。请注意，使用隐藏的跨度而不是隐藏的选择效果很好，但宽度会有点偏差，正如 sami-al-subhi 在下面的评论中指出的那样。

$(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="//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>