テキストサイズで選択の幅を変更

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ではできません。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>