如何让HTML <select>的选中项显示在列表中部或顶部？

现有代码可给<select>设置选中项，但选中项会出现在列表末尾，不符合预期UI/UX：

<select id="list" multiple size=10>
</select>

#list { width: 100px; }

var l = document.getElementById("list");
for (var i = 0; i < 100; i++) {
    l.innerHTML += "<option value='" + i + "'>" + i + "</option>";
}
l.value = 17;

需求：让选中的<option>显示在列表视图的中部或顶部（在有足够后续项的前提下）。

解决方案 #

方法1：用scrollIntoView控制滚动位置 #

通过选中对应的<option>元素，调用scrollIntoView()方法直接控制显示位置：

让选中项显示在顶部

var l = document.getElementById("list");
for (var i = 0; i < 100; i++) {
    l.innerHTML += "<option value='" + i + "'>" + i + "</option>";
}
l.value = 17;
// 获取选中的option元素
var selectedOption = l.querySelector('option[value="17"]');
// 滚动到视图顶部
selectedOption.scrollIntoView({ block: 'start', behavior: 'auto' });

让选中项显示在中部

var l = document.getElementById("list");
for (var i = 0; i < 100; i++) {
    l.innerHTML += "<option value='" + i + "'>" + i + "</option>";
}
l.value = 17;
var selectedOption = l.querySelector('option[value="17"]');
// 滚动到视图中部
selectedOption.scrollIntoView({ block: 'center', behavior: 'auto' });

方法2：手动计算滚动位置（兼容旧浏览器） #

如果要兼容不支持scrollIntoView参数的旧浏览器，可以手动计算<select>的滚动值：

var l = document.getElementById("list");
for (var i = 0; i < 100; i++) {
    l.innerHTML += "<option value='" + i + "'>" + i + "</option>";
}
l.value = 17;
var selectedOption = l.querySelector('option[value="17"]');
// 计算滚动到中部的位置
var itemHeight = selectedOption.offsetHeight;
var viewportHeight = l.clientHeight;
var itemTop = selectedOption.offsetTop;
// 滚动后让选中项居中
l.scrollTop = itemTop - (viewportHeight / 2) + (itemHeight / 2);

补充说明 #

• scrollIntoView的behavior参数可设为'smooth'实现平滑滚动，'auto'为瞬间滚动，按需选择。
• 手动计算方式需确保<option>高度一致，否则计算结果会有偏差。

内容的提问来源于stack exchange，提问作者Basj