javascript - 选择较短的选项时,HTML 下拉菜单更改大小
问题描述
我有这段 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 实现它,我将不胜感激!
解决方案
您可以创建一个隐藏视图来存储所选项目并获取与其对应的宽度,然后将宽度设置为您选择的视图。检查以下示例。
$(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>
推荐阅读
- elasticsearch - 动态更改弹性搜索查询中的“来自”值
- postgresql - 游标中的循环无法正常工作
- postgresql - 已安装postgis但无法创建扩展:错误:无法打开扩展控制文件~/postgis.control":没有这样的文件或目录
- javascript - JQuery函数在另一个函数之后不起作用
- artificial-intelligence - 对话框流中 fb messenger 的“开始”按钮
- c# - 实体框架中的用户定义表生成不正确的查询
- c# - 将文件分组为 500MB 块
- laravel - 在 laravel 5.7 中将 pdf 文件作为电子邮件附件发送
- java - 通过 REST API 从 Java 下载 cognos 报告
- layout - 如何在 openfin 布局管理器中实现生成和恢复工作区?你能举一些例子吗