如何阻止下拉菜单上升？答案

【问题标题】：How do you stop a dropdown menu from going up?如何阻止下拉菜单上升？
【发布时间】：2012-06-04 20:17:23
【问题描述】：

对于大多数屏幕尺寸，我有一个位于页面顶部的下拉菜单，但在较小的屏幕（例如笔记本电脑）上，菜单位于屏幕中间，因此，下拉列表正在运行选择器上方。我想要一个下拉菜单，无论它在页面的哪个位置，它都会持续下降。这有可能吗？

【问题讨论】：

发布对行为负责的标记、样式和 JavaScript。
您的下拉菜单太大。你应该减少项目的数量，或者找到另一种方法来做你需要的事情。长下拉列表会导致可用性差。

标签： javascript html css drop-down-menu selector

【解决方案1】：

下拉菜单由浏览器/操作系统呈现。您无法使用 CSS 或 JavaScript 控制此类行为。

【讨论】：

我做了一些搜索，我同意@Diodeus 没有办法，但你可以将下拉菜单转换为一个选项
那我该如何控制呢？有没有可能不重新定义我正在使用的列表的方法？
你不能。不，没有其他办法。
您唯一的其他选择是使用 HTML/CSS/JavaScript 替换

【解决方案2】：

因为它是一个留给浏览器渲染的元素，不，这是不可能的（至少就标准而言不是）。

您最好的选择是使用 HTML 替代下拉菜单 - 这可以通过 CSS 和 Javascript 来实现，尽管已经存在多个 javascript/jQuery 库来执行此任务。

【讨论】：

有没有办法告诉浏览器如何呈现列表？我唯一的问题是在 IE 中。其他所有浏览器都能很好地处理它。

【解决方案3】：

主要问题在于 IE。似乎如果您有一个选项列表并且您当前选择的选项不是第一个选项，那么下拉菜单可能会变成“Dropup”。要解决此问题，您可以添加一行 javascript 以将所选项目移动到列表顶部。每次做出新选择时，您都需要触发此代码。同样在页面第一次加载之后。通过将所选选项保留在选项列表的顶部，IE 仅呈现下拉菜单。我并不是说这个解决方案很漂亮，但它可以作为最后的手段。（您需要保存代码和脚本并将其加载到 IE 中才能真正看到它的工作）。

$('select.dropdowntest').prepend($('select.dropdowntest option:selected'));
$('select.dropdowntest').on('change', function() {
  $('select.dropdowntest').prepend($('select.dropdowntest option:selected'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="dropdowntest">
  <option value="sv">Option 1</option>
  <option selected="selected" value="en">Option 2</option>
</select>

【讨论】：

这是应该投票的正确答案

【解决方案4】：

您可以在选择中编辑字体大小，这会改变浏览器的行为

select {
   font-size: 15px;
}

【讨论】：