下拉选项不随选择框移动答案

【问题标题】：Drop down options doesn't moves with the select box下拉选项不随选择框移动
【发布时间】：2019-11-01 09:18:26
【问题描述】：

我有一个 div，其中的一些内容会在 5 秒后隐藏，但在它下方，我有一个带有一些选项的下拉菜单。 So what happens when the select box is open and at the same time the div gets hidden, the options box remains in the same place and doesn't shift upwards with the select box.

创建自定义下拉菜单不是一种选择。以及使上述 div 绝对或固定。使下拉模糊也不是一种选择。谁能告诉我这个默认行为是否可以改变？

客户不同意定制解决方案。
客户端不希望上述 div 浮动或定位绝对或固定。他想要相同的设置，但这个问题已解决。

关闭选择框或使用 blur() 也不是客户想要的。

<!DOCTYPE html>
<html>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<body>
<div class='war'>SOME RANDOM CODE which gets hidden after 5 seconds. Make sure to open the drop down</div>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<script>
setTimeout(function(){ $(".war").hide(); }, 3000);
</script>
</body>
</html>

【问题讨论】：

您可以查看stackoverflow.com/help/minimal-reproducible-example 并编辑您的问题以确保任何人都可以帮助您。

标签： html drop-down-menu default

【解决方案1】：

这个解决方法怎么样：

- 单击选择菜单时，它会获得一个大小属性，该属性与其包含的所有选项元素一样大，因此它会随着窗口中的元素一起移动，因为它会消失。
- 如果您添加一些 css 样式，则用户在选择选项时不会发现选择元素的大小发生了变化。
- 不幸的是，标准箭头样式不同，具体取决于浏览器。例如，我的解决方案在 chrome 中看起来最好，但在 Firefox 中不是最佳的 - 因此应该添加进一步的浏览器特定优化。
下面是对应的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>example</title>
<style>
  #box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
  
  #options {
    overflow: hidden;
  }
  
  #first::after {
  content: "  ⯆ ";
  font-size: 10px;
  }

  </style>
  </head>
<body>
<div id="box"></div>
  <select name="selectionarea" id="options" onclick="makeBoxDisappear();expandSelect()" onfocusout="minimizeSelect()">
    <option value="option1" id="first">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
    <option value="option5">option5</option>    
  </select>
  <script>
  
  function makeBoxDisappear() {
    setTimeout(() => document.getElementById("box").style.display = "none", 1000);
  }

  
  function expandSelect() {
    document.getElementById("options").size="5";
  }


  function minimizeSelect() {
    document.getElementById("options").size="1";
  }

  </script>
</body>
</html>

【讨论】：