如何根据所选选项的高度调整选择菜单的大小？
Posted
技术标签:
【中文标题】如何根据所选选项的高度调整选择菜单的大小？【英文标题】：How to resize the select menu according to the height of selected option? 【发布时间】：2019-01-11 05:43:47 【问题描述】：我有一个选择菜单，每个选项都有不同的长度。如何根据所选选项的高度更改选择菜单的高度？选择菜单的宽度应该相同。
body
background-color: black;
select
padding: 30px, 30px, 0, 0;
max-width: 280px;
min-width: 140px;
background-color: white;
height: 32px;
border: 0;
border-radius: 0;
margin: 0 auto;
cursor: pointer;
box-sizing: border-box;
white-space: normal;
word-wrap: break-word;
@media only screen and (max-width: 600px)
max-width: 320px;
@media only screen and (max-width: 400px)
max-width: 180px;
<body>
<select>
<option value="first">First Value First Value First Value First Value First Value First Value</option>
<option value="second" selected>Second Value Second Value Second Value Second Value</option>
<option value="third">Third Value Third Value Third Value Third Value</option>
</select>
</body>
链接到CodePen
谢谢！
【问题讨论】：
你的意思是想让选择框和最宽的子选项一样宽？ 感谢您的评论。选择菜单的宽度应该相同。 【参考方案1】：如果你使用一些 jquery，这很容易实现：P
function function1()
var val = document.getElementById("ID1").value;
console.log(val);
if (val == "first")
$("#ID1").css( "height": "20px" );
else if (val == "second")
$("#ID1").css( "height": "50px" );
else if (val == "third")
$("#ID1").css( "height": "100px" );
select
height: 50px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select Id="ID1" onchange="function1()">
<option value="first">First Value First Value First Value First Value First Value First Value</option>
<option value="second" selected>Second Value Second Value Second Value Second Value</option>
<option value="third">Third Value Third Value Third Value Third Value</option>
</select>不要忘记为您的选择添加一个 id 并调用 function1() onchange。
<select Id="ID1" onchange="function1()">
【讨论】：
以上是关于如何根据所选选项的高度调整选择菜单的大小？的主要内容，如果未能解决你的问题，请参考以下文章
根据所选 OPTION 的宽度自动调整 SELECT 元素的大小