如何根据所选选项的高度调整选择菜单的大小？答案

【问题标题】：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

谢谢！

【问题讨论】：

你的意思是想让选择框和最宽的子选项一样宽？
感谢您的评论。选择菜单的宽度应该相同。

标签： html css sass html-select

【解决方案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()">

【讨论】：