按文本大小更改选择的宽度

Question

我如何选择具有与文本大小相同宽度的选项？

|Choose your City ▼|  - select
|Option 1|
|option two|
|option abcabcabc|

结果：

|Option 1         ▼|      
|Option two       ▼|
|Option abcabcabc ▼|

但是如果我选择一个特定的城市，我想看到这样的结果

|Option 1▼|      
|Option two▼|
|Option abcabcabc ▼|

是否可以使用 css 来更改 select 中选项的宽度？

Answer 1

这不能用简单的 html 和 css 来完成，因为 select 有一些默认宽度，或者如果你给出自定义宽度，那么它也不会根据内容调整大小。

创建一个不同的隐藏元素，仅用于保留文本，以便您可以使用jquery获取宽度并使用这个小jquery。

$(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://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="resizing_select">
  <option>1</option>
  <option>two</option>
  <option>abcabcabc</option>
</select>
<select id="width_tmp_select">
  <option id="width_tmp_option"></option>
</select>