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>
<select name="" id="listG" 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" selected="selected">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

$(document).ready(function () {

    // put it into a reusable function
    function centreSelected(el) {
        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;

    }

    $('#listF, #listG').each(function () {
        // bind the change event
        $(this).on('change', centreSelected);
        // apply it to the element now
        centreSelected.apply(this);
    });

});