Question

我有一点 HTML：

<select name="tables" id="tables">
        <option value="random">Random</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
</select>

我的问题是“随机”的字符比“1”、“2”或“3”多得多。当我选择“2”时，该框的大小仍然与“随机”相同（在上面尝试）。我可以让尺寸随着输入的变化自动改变吗？即使数字达到135？我也不是 JavaScript 新手，所以如果有办法使用 JS 实现它，我将不胜感激！

Answer 1

您可以创建一个隐藏视图来存储所选项目并获取与其对应的宽度，然后将宽度设置为您选择的视图。检查下面的例子。

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

#resizing_select {
 width: 80px;
} 
 
#width_tmp_select{
 display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="resizing_select">
 <option>random</option>
 <option>1</option>
 <option>2</option>
  <option>2</option>
</select>
<select id="width_tmp_select">
 <option id="width_tmp_option"></option>
</select>

选择较短选项时 HTML 下拉列表更改大小

1 个答案: