Question

我有一个选择菜单，每个选项都有不同的长度。如何根据所选选项的高度更改选择菜单的高度？选择菜单的宽度应该相同。

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

谢谢！

Answer 1

如果您使用一些jquery：P

plot should be a ggplot2 plot!

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;
}

别忘了添加一个ID到您的选择以及调用function1（）onchange。

<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>

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

1 个答案: