JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<form method="post">
<p>Select Multiple:<br />
<select id="test_one" multiple size="3">
<option name="one" value="1">one</option>
<option name="two" value="2">two</option>
<option name="three" value="3">three</option>
<option name="four" value="4" selected>four</option>
<option name="five" value="5">five</option>
<option name="six" value="6" selected>six</option>
</select>
<p>Select One:<br />
<select size="3">
<option name="one" value="1">one</option>
<option name="two" value="2">two</option>
<option name="three" value="3">three</option>
<option name="four" value="4">four</option>
<option name="five" value="5" selected>five</option>
<option name="six" value="6">six</option>
</select>
<p>Select Multiple:<br />
<select id="test_too" multiple size="3">
<option name="one" value="1">one</option>
<option name="two" value="2">two</option>
<option name="three" value="3" selected>three</option>
<option name="four" value="4" selected>four</option>
<option name="five" value="5">five</option>
<option name="six" value="6">six</option>
</select>
<p>
</form>

JavaScript

window.onload = function() {
    // Since we only need to auto-scroll the select elements
    // after the page has loaded ...
    // list auto-scroll selects by id
    select_list = new Array('test_one', 'test_too');
    scroll_selected(select_list);
};

function scroll_selected(selects) {
    OUTER: for (var i = 0; i < selects.length; i++) {
        var select = document.getElementById(selects[i]);
        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;
                opts.item(j).selected = true;
                continue OUTER;
            }
        }
    }
}