如何防止下拉菜单向上弹出？

Question

我有一个下拉菜单，它在大多数屏幕尺寸上都位于页面顶部，但在更小的屏幕上，例如笔记本电脑，该菜单位于屏幕中央，因此下拉列表会出现在选择器上方。我想要一个一直向下展开的下拉菜单，无论它在页面的哪个位置。这种情况是否可能？

- Chad

---

发布标记、样式和负责行为的JavaScript。 - Stephen__T

你的下拉菜单太大了。你应该减少项目数量，或者找到另一种方法来完成你需要的功能。过长的下拉列表会降低可用性。 - Kendall Frey

Answer 1

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

- Diodeus - James MacFarlane

---

我进行了一些搜索，我同意@Diodeus的观点，除非你将下拉菜单转换为菜单，否则没有其他方法。 - shareef

那么我怎样才能控制它呢？有没有可能的方法而不重新定义我正在使用的列表？ - Chad

你不行。不，没有其他办法。 - Daedalus

你唯一的其他选择是使用HTML/CSS/JavaScript替代<select>。 - Diodeus - James MacFarlane

Answer 2

由于下拉菜单是由浏览器自行渲染的元素，因此标准规定不支持直接实现此功能。

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

- Death

---

有没有一种方法可以告诉浏览器如何呈现列表？我的唯一问题在于IE。其他所有浏览器都能很好地处理它。 - Chad

Answer 3

主要问题在于IE浏览器。如果你有一个选项列表，而当前选定的选项不是第一个选项，那么下拉菜单可能会变成“上拉”。 为了解决这个问题，你可以添加一行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>

- RollingInTheDeep

---

这是正确的答案，应该被点赞。 - WebDev-SysAdmin

Answer 4

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

select {
   font-size: 15px;
}

- MechiH