如何将 HTML 多 selection select 框滚动到第一个 selected 选项？

Question

我试图让 HTML 多选 select 框滚动到第一个选择的选项，但我找不到任何方法。有办法吗？

<select id=s multiple> 
<option value=0>One</option>
...

<option value=99 selected>Many</option>
</select>

Answer 1

您可以使用以下函数查找列表中第一个 selected 元素，然后将 select 框滚动到它。

确保在已经加载 selections 时调用该函数，通常是在 window.onload 事件上，但如果您正在填充 select ion与ajax调用，需要分别调用该函数（一旦selection已经到位）


// this is how you call the function, using the ID ("s") in your example:
window.onload = function(){
 scrollToSelected( "s" )
}

function scrollToSelected( select_id ) {
  var select = document.getElementById( select_id );
  var opts = select.getElementsByTagName('option');
  for ( var j = opts.length -1; j > 0; --j ) {
    if ( opts.item(j).selected == true ) {
      select.scrollTop = j * opts.item(j).offsetHeight;
      return;
    } 
  }
}

您可以使用以下行设置确切的滚动位置：

select.scrollTop = j * opts.item(j).offsetHeight;

...以上将尝试滚动，直到 selected 位于列表顶部。

Answer 2

感谢您的建议。

看来我不能post在评论中编码，所以我需要把它放在这里。 option 标签的 CSS 中的 height: 20px; 和以下 Javascript:

似乎有效

 var select = document.getElementById(select_id);
    if (!select) console.error("no " + select_id);
    var opts = select.getElementsByTagName('option');
    var j = select.selectedIndex;
    if (j == -1) return;
    select.scrollTop = j * 20;

我得到 0 选项的 offsetHeight 但硬编码上述值似乎有效。

如何将 HTML 多 selection select 框滚动到第一个 selected 选项？

How do I scroll an HTML multiple-selection select box to the first selected option?

html

javascript

scroll

html-select