HTML下拉自动宽度调整

Question

我创建了一个下拉菜单，该下拉菜单在根据所选内容调整大小时出现问题。我使用以下 stackoverflow 答案作为调整下拉列表大小的灵感：https://stackoverflow.com/a/20091985/3166468

由于某种原因，尽管发生了调整大小，但它总是调整得过大或过小。这是 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);  
  });
});

当您选择下拉选项时，您会看到它的大小调整得过大或过小。如何使调整大小正常工作？

Answer 1

问题是您隐藏的下拉菜单的字体大小不同。 将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;
	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>

Answer 2

使用 CSS 我的朋友！请代表我:)

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