我创建了一个下拉菜单，该下拉菜单存在根据所选内容调整大小的问题。我使用以下 stackoverflow 答案作为调整下拉列表大小的灵感：https://stackoverflow.com/a/20091985/3166468 https://stackoverflow.com/a/20091985/3166468
由于某种原因，尽管发生了调整大小，但它总是调整太多或太少。这是 jsFiddle：https://jsfiddle.net/yadhwb97/3/ 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);
});
});
当您选择下拉选项时，您将看到它如何调整大小太多或太小。如何才能正确调整大小？
问题是您的隐藏下拉菜单的字体大小不同。
添加font-size: 16px; to #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;
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
