Question

对于大多数屏幕尺寸，我有一个下拉菜单朝向页面顶部，但在较小的屏幕上，例如笔记本电脑，菜单位于屏幕中间，因此，下拉列表即将开始在选择器上方。无论页面位于何处，我都希望下拉列表能够始终如一地下降。这有可能吗？

Answer 1

下拉菜单由Browser / OS呈现。您无法使用CSS或JavaScript控制此类行为。

Answer 2

因为它是浏览器要渲染的一个元素，不，这是不可能的（至少不是标准所涉及的）。

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

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

Answer 4

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

select {
   font-size: 15px;
}

你如何阻止下拉菜单上升？

4 个答案: