Chrome 中 <select> 滚动位置的问题答案

【问题标题】：Issue with <select> scroll position in ChromeChrome 中 <select> 滚动位置的问题
【发布时间】：2020-09-26 05:54:13
【问题描述】：

我目前使用的是 Chrome 42.0.2311.135 m、IE 11 和 Firefox 37，我在 Chrome 中遇到了一个与 <select> 元素有关的小问题。

此屏幕截图显示了 Chrome 中显示的 <select>。我正在使用 jQuery 将<select> 的值设置为第一个选项的值。

此屏幕截图显示 IE11 中的同一页面。问题是 Chrome 稍微向下滚动，因此填充不可见。如果我滚动到列表顶部，它会显示如下。

如果我不设置 <select> 的值，Chrome 会显示顶部填充（即滚动条就在顶部）。

如何选择一个值并在 Chrome 中显示顶部填充？

我应用到<select> 的 CSS 非常基础。

.home .desktop-header form select.make, .home .desktop-header form select.model {
    width: 27%;
    margin-right: 20px;
    padding: 10px;
}

我正在使用以下方法设置值：

cfg.makesList.element.val(cfg.makesList.element.find("option")[0].value).change();

连接了一个更改事件以检索模型列表的列表选项。

Makes 列表在列表的开头显示了 10 个最受欢迎的选项（并且还按字母顺序将它们包含在完整列表中），因此<select> 有 10 个选项，其值在列表中存在两次。（示例见http://jsfiddle.net/0ftL6w3y/2/）

【问题讨论】：

我似乎无法重现您在 Chrome 中看到的内容。您能否分享有关您选择第一个选项的方法的更多信息？ jsfiddle.net/timothyjmullen/0ftL6w3y/1
测试了 @TimMullen 的小提琴，在完全相同的 Chrome 版本 (42.0.2311.135 m) 上为我工作。
我已经用我的页面生成的 HTML 更新了 fiddle，并且可以重现错误：jsfiddle.net/0ftL6w3y/2
实际上，我现在想知道是不是因为前 10 个选项（流行选项）在列表中存在两次。
事实证明，具有相同值的两个选项是问题的原因。

标签： html css

【解决方案1】：

试试这个代码::

使用此代码使其滚动到顶部：

$('select').scrollTop(0);

JSFIDDLE DEMO

【讨论】：

这行得通，但我最终只是在“流行”项目中添加了一个前导零，以便所有选项都具有唯一值。该值在后端用作int，因此前导零没有区别。

【解决方案2】：

我不确定您的 HTML 代码和其他样式（包括您的页面内容位置）是如何获得的。在这里，我已经尝试在下面实现你想要的。

查看此演示。

<html>
<head>
<style>
.select-menu {border: 1px solid #e6e6e6;height: 90px;margin: 10px;padding: 10px;width: 90px;}
.select-menu > select {width: 85px;}
</style>
</head>
<body>
<div class="select-menu">
<select size="5">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
</select>
</div>
</body>
</html>

【讨论】：