JavaScript解決select下拉框中的內容太長顯示不全的問題
1、說明
有些情況下，select下拉框的內容過長，導致部分看不見；
現在通過滑鼠事件，讓下拉框中的內容顯示完全
2、實現源碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript解決select下拉框中的內容太長顯示不全的問題</title><script type="text/javascript"> /** * 自動化佈建select下拉框的寬度 */ function autoWidth() { //擷取select中的ID var selectId = document.getElementById("select_option"); //自動化佈建下拉框的寬度 selectId.style.width = 'auto'; } /** * 設定select下拉框的寬度 */ function setWidth() { //擷取select中的ID var selectId = document.getElementById("select_option"); //設定select下拉框的寬度為120 selectId.style.width = "120px"; }</script></head><body> <div id="select_div"> <select id="select_option" onmousedown="autoWidth()" onblur="setWidth()" onchange="setWidth()"> <option value="0">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option> <option value="1">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option> <option value="2">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</option> <option value="3">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</option> <option value="4">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option> <option value="5">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</option> <option value="6">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</option> <option value="7">HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</option> <option value="8">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</option> <option value="9">JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</option> </select> </div></body></html>
（1）初始化時
（2）選中第三項
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
