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

I am trying to get an HTML multiple-selection select box to scroll to the first selected option, but I cannot find any way of doing so. Is there a way?

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

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

You can use the below function that will look for the first selected element in your list, and will scroll the select box to it.

Make sure you call the function when you already have the selections loaded, usually on window.onload event, but if you're populating the selections with ajax call, the function needs to be called respectively (once the selections are already in place)

// 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;
    } 
  }
}

With the following line you can set the exact scroll position:

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

... the above will attempt to scroll until the selected will be in the top of the list.