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

Question

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

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

结果：

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

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

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

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

Answer 1

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

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

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#resizing_select').change(function() {
    $("#width_tmp_option").html($('#resizing_select option:selected').text());
    $(this).width($("#width_tmp_select").width());
  });
});

＆＃13;

#resizing_select {
  width: 50px;
}
#width_tmp_select {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;