iOS中Safari瀏覽器select下拉列表文字太長被截斷的處理方法

　　網頁中的select下拉列表，文字太長的話在iOS的Safari瀏覽器裏會被自動截斷，顯示成下面這種：

　　安卓版的瀏覽器則沒有這個問題。

　　如何讓下拉列表中的文字在iOS的Safari瀏覽器裏顯示完整呢？答案是使用<optgroup></optgroup>標籤。有關optgroup標籤的做用能夠查看w3school網站的說明。

　　正常select下拉列表的html是這樣：

<select id="sel_model" class="form-control">
   <option value="">請選擇車型</option>
   <option value="5a38a7cae794ff021d4e9eab">2018款 奧迪A3 30週年年型 Sportback 35 TFSI 進取型</option>
   <option value="5a38a7cae794ff021d4e9eac">2018款 奧迪A3 30週年年型 Limousine 35 TFSI 進取型</option>
   <option value="5a38a7cae794ff021d4e9ead">2018款 奧迪A3 30週年年型 Sportback 35 TFSI 時尚型</option>
   <option value="5a38a7cae794ff021d4e9eae">2018款 奧迪A3 30週年年型 Limousine 35 TFSI 時尚型</option>
   <option value="5a38a7cae794ff021d4e9eaf">2018款 奧迪A3 30週年年型 Sportback 35 TFSI 運動型</option>
</select>

　　加入optgroup標籤以後的html是這樣：

<select id="sel_model" class="form-control">
    <optgroup>
       <option value="">請選擇車型</option>
       <option value="5a38a7cae794ff021d4e9eab">2018款 奧迪A3 30週年年型 Sportback 35 TFSI 進取型</option>
       <option value="5a38a7cae794ff021d4e9eac">2018款 奧迪A3 30週年年型 Limousine 35 TFSI 進取型</option>
       <option value="5a38a7cae794ff021d4e9ead">2018款 奧迪A3 30週年年型 Sportback 35 TFSI 時尚型</option>
       <option value="5a38a7cae794ff021d4e9eae">2018款 奧迪A3 30週年年型 Limousine 35 TFSI 時尚型</option>
       <option value="5a38a7cae794ff021d4e9eaf">2018款 奧迪A3 30週年年型 Sportback 35 TFSI 運動型</option>
    </optgroup>
</select>    

　　而後iOS的Safari瀏覽器上顯示效果以下：

　　iOS會根據select下拉列表中的內容長度自動縮小字體，以保證全部內容能在一行顯示出來。儘管在HTML中加入了optgroup標籤，但經過JQuery獲取select選中值的方法不受任何影響。例如咱們仍然能夠經過$('#sel_model').val()來獲取下拉列表的選中值。

　　optgroup是一個很神奇的標籤！