網(wǎng)頁(yè)中的select下拉列表，文字太長(zhǎng)的話在iOS的Safari瀏覽器里會(huì)被自動(dòng)截?cái)啵@示成下面這種：
安卓版的瀏覽器則沒有這個(gè)問題。
如何讓下拉列表中的文字在iOS的Safari瀏覽器里顯示完整呢？答案是使用<optgroup></optgroup>標(biāo)簽。有關(guān)optgroup標(biāo)簽的作用可以查看w3school網(wǎng)站的說(shuō)明。
正常select下拉列表的html是這樣：
請(qǐng)選擇車型 2018款 奧迪A3 30周年年型 Sportback 35 TFSI 進(jìn)取型2018款 奧迪A3 30周年年型 Limousine 35 TFSI 進(jìn)取型2018款 奧迪A3 30周年年型 Sportback 35 TFSI 時(shí)尚型2018款 奧迪A3 30周年年型 Limousine 35 TFSI 時(shí)尚型2018款 奧迪A3 30周年年型 Sportback 35 TFSI 運(yùn)動(dòng)型
加入optgroup標(biāo)簽之后的html是這樣：
<select id="sel_model" class="form-control"> <optgroup> <option value="">請(qǐng)選擇車型</option> <option value="5a38a7cae794ff021d4e9eab">2018款 奧迪A3 30周年年型 Sportback 35 TFSI 進(jìn)取型</option> <option value="5a38a7cae794ff021d4e9eac">2018款 奧迪A3 30周年年型 Limousine 35 TFSI 進(jìn)取型</option> <option value="5a38a7cae794ff021d4e9ead">2018款 奧迪A3 30周年年型 Sportback 35 TFSI 時(shí)尚型</option> <option value="5a38a7cae794ff021d4e9eae">2018款 奧迪A3 30周年年型 Limousine 35 TFSI 時(shí)尚型</option> <option value="5a38a7cae794ff021d4e9eaf">2018款 奧迪A3 30周年年型 Sportback 35 TFSI 運(yùn)動(dòng)型</option> </optgroup></select>
然后iOS的Safari瀏覽器上顯示效果如下：
iOS會(huì)根據(jù)select下拉列表中的內(nèi)容長(zhǎng)度自動(dòng)縮小字體，以保證所有內(nèi)容能在一行顯示出來(lái)。盡管在HTML中加入了optgroup標(biāo)簽，但通過JQuery獲取select選中值的方法不受任何影響。例如我們?nèi)匀豢梢酝ㄟ^$('#sel_model').val()來(lái)獲取下拉列表的選中值。
optgroup是一個(gè)很神奇的標(biāo)簽！
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！
推薦閱讀：
怎么操作JS里的無(wú)序列表屬性
詳談css樣式初始化
在表單中button與input的區(qū)別
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬(wàn)商天勤律師事務(wù)所王興未律師提供法律服務(wù)
