HTML下拉菜單自動調整寬度

我創建了一個下拉菜單，根據選擇的內容調整了大小。我使用以下計算器答案作爲靈感來調整我的下拉列表的大小：https://stackoverflow.com/a/20091985/3166468 HTML下拉菜單自動調整寬度

出於某種原因，雖然調整大小發生，但它總是調整太大或太小。這裏的的jsfiddle：https://jsfiddle.net/yadhwb97/3/

這是HTML：

<div class="dropdown"> 
    <select id="real_dropdown"> 
    <option disabled="">Options</option> 
    <option value="long">Something super long in here</option> 
    <option value="short">Short</option> 
    </select> 
</div> 
<select id="width_tmp_select"> 
    <option id="width_tmp_option"></option> 
</select>

這是jQuery的：

$(document).ready(function() { 
    $('.dropdown').change(function(){ 
    $("#width_tmp_option").html($('.dropdown option:selected').text()); 
    $(this).width($("#width_tmp_select").width()+30); 
    }); 
});

當您選擇下拉選項，你會看到它如何調整其大小要麼太太多或太少。我如何正確地調整大小？

來源

2017-03-15 TheBigDoubleA

您可以隨時增加'寬度value'即取代'+ 30'使用別的東西。但是，獲得準確的解決方案可能有點棘手。您必須將每個選項的初始寬度存儲在具有'name'和'width'的對象中，然後在更改時根據選擇拉取值並設置寬度。現在，當選擇長選項時，您可以將寬度設置爲280，但您需要考慮稍後將添加的將來/其他選項。 – TheUknown

問題是你的隱藏下拉有差異的字體大小。加font-size: 16px;到#width_tmp_select，現在應該工作。

$(document).ready(function() { 
 
    $('.dropdown').change(function(){ 
 
    $("#width_tmp_option").html($('.dropdown option:selected').text()); 
 
    $(this).width($("#width_tmp_select").width()); 
 
    }); 
 
});

.dropdown { 
 
    width: 280px; 
 
    overflow: hidden; 
 
    background: url(https://secure.echobox.com/img/dropdown_arrow.png) no-repeat right transparent; 
 
    border: 1px solid black; 
 
    white-space: nowrap; 
 
    background-size: 18px 5px; 
 
} 
 

 
.dropdown select { 
 
    width: 100%; 
 
    background: transparent; 
 
    font-size: 16px; 
 
    border: 0; 
 
    border-radius: 0; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    font-family: "proxima-nova", Helvetica, Arial, sans-serif; 
 
    white-space: nowrap; 
 
    color: #56646E; 
 
} 
 

 
#width_tmp_select{ 
 
    display : none; 
 
\t font-size: 16px; 
 
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
 

 
<h2> 
 
This "custom" dropdown doesn't resize correctly. 
 
</h2> 
 
<div class="dropdown"> 
 
    <select id="real_dropdown"> 
 
    <option disabled="">Options</option> 
 
    <option value="long">Something super long in here</option> 
 
    <option value="short">Short</option> 
 
    </select> 
 
</div> 
 
<select id="width_tmp_select"> 
 
    <option id="width_tmp_option"></option> 
 
</select>

來源

2017-03-28 15:39:58

-2

用CSS我的朋友！請代表我:)

#real_dropdown { 
 
    width: 100px; 
 
    min-width: 100px; 
 
    max-width: 200px; 
 
} 
 
#width_tmp_select { 
 
    width: 100px; 
 
    min-width: 100px; 
 
    max-width: 200px; 
 
}

來源

2017-03-15 17:56:25

您的代碼似乎沒有調整下拉列表的大小。 – TheBigDoubleA

HTML下拉菜單自動調整寬度

回答

相關問題