JSFiddle - React, Tailwind, and code Playground

by milz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css">
<div class="container">
    <h1>Some content<h2>
    <select name="mySelect" id="mySelect">
        <option value="0">Select option...</option>
        <option value="6">Go to option 6</option>
        <option value="10">Go to option 10</option>
        <option value="14">Go to option 14</option>
    </select>
    <div>
        <h3 id="test1">Test 1</h3>
        <p>&nbsp;</p>
        <h3 id="test2">Test 2</h3>
        <p>&nbsp;</p>
        <h3 id="test3">Test 3</h3>
        <p>&nbsp;</p>
        <h3 id="test4">Test 4</h3>
        <p>&nbsp;</p>
        <h3 id="test5">Test 5</h3>
        <p>&nbsp;</p>
        <h3 id="test6">Test 6</h3>
        <p>&nbsp;</p>
        <h3 id="test7">Test 7</h3>
        <p>&nbsp;</p>
        <h3 id="test8">Test 8</h3>
        <p>&nbsp;</p>
        <h3 id="test9">Test 9</h3>
        <p>&nbsp;</p>
        <h3 id="test10">Test 10</h3>
        <p>&nbsp;</p>
        <h3 id="test11">Test 11</h3>
        <p>&nbsp;</p>
        <h3 id="test12">Test 12</h3>
        <p>&nbsp;</p>
        <h3 id="test13">Test 13</h3>
        <p>&nbsp;</p>
        <h3 id="test14">Test 14</h3>
        <p>&nbsp;</p>
    </div>
</div>

CSS

.container { width:500px; height: 5000px; background-color: lightGray; padding:30px; }

JavaScript

$('#mySelect').select2();

$('#mySelect').on("change", function(e) { 
        var element = '#test'+$(this).select2('val');
        var scroll_pos = $(element).offset().top;
            
        $('#mySelect').blur();
        $('html,body').scrollTop(scroll_pos);
    })
    .on("select2-close", function () {
        setTimeout(function() {
            $('.select2-container-active').removeClass('select2-container-active');
            $(':focus').blur();
        }, 1);
    });