Ändern Sie die Breite der Auswahl von Textgröße

Question

Wie kann ich eine Auswahl mit Optionen, um die gleiche Breite wie die Textgröße haben?

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

Ergebnis:

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

Aber ich sehe wie das will führen, wenn ich eine bestimmte Stadt wählen

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

mit CSS ist posible die Breite der Option wählen zu ändern ?

Answer 1

Nun, das kann nicht mit einfachen HTML und CSS getan werden, da Auswahl hat einige Standardbreite oder wenn Sie benutzerdefinierte Breite dann auch wird es nicht Größe entsprechend Inhalt.

Erstellen Sie ein anderes verstecktes Element, das nur für das Halten von Text ist, damit Sie die Breite mit jquery erhalten und diese kleine jquery verwenden können.

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