Изменить ширину выбора по размеру текста

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, так как выбор имеет некоторую ширину по умолчанию, или если вы даете пользовательскую ширину, то она также не будет изменяться в зависимости от содержимого.

Создайте другой скрытый элемент, который предназначен только для хранения текста, чтобы вы могли получить ширину с помощью 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>