JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<select id="sel" size="10" multiple >
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
</select>
<span id="moveDown">Move Down</span>

JavaScript

$("#moveDown").button().click(function () {
    var select = $("#sel");
    var selItem = $("#sel option:selected");
    var next = selItem.last().next();
    var index = selItem.insertAfter(next).index() + 1;
    if(index > $('#sel').attr('size')){
        $('#sel').scrollTop(17 * parseInt(index - $('#sel').attr('size'))); //17 is height of option
    }
});