JSFiddle - React, Tailwind, and code Playground

HTML

<select name="" id="listF" size="10">
    <option value="01">001</option>
    <option value="02">002</option>
    <option value="03">003</option>
    <option value="04">004</option>
    <option value="05">005</option>
    <option value="06">006</option>
    <option value="07">007</option>
    <option value="08">008</option>
    <option value="09">009</option>
    <option value="10">010</option>
    <option value="11">011</option>
    <option value="12">012</option>
    <option value="13">013</option>
    <option value="14">014</option>
    <option value="15">015</option>
    <option value="16">016</option>
    <option value="17">017</option>
    <option value="18">018</option>
    <option value="19">019</option>
    <option value="20">020</option>
    <option value="21">021</option>
    <option value="22">022</option>
    <option value="23">023</option>
    <option value="24">024</option>
</select>

JavaScript

$('#listF').on('change', function(){
    var n = this.getAttribute('size'),
        i = this.selectedIndex,
        l = this.options.length;
    this.selectedIndex = Math.min(l-1,i+n/2|0);
    this.selectedIndex = Math.max(0,i+1-n/2|0);
    this.selectedIndex = i;
});