Dropdown Redirect

<div class="p-4 sm:p-12 flex justify-center">

    <div class="inline-block relative w-64 mb-2">

        <select id="selectElement" class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
            <option selected="" disabled="">Select a Sport</option>
            <option value="http://example.com/active-recreation">Active Recreation</option>
            <option value="http://example.com/archery">Archery</option>
            <option value="http://example.com/athletics-track-and-field">Athletics (Track and field)</option>
            <option value="http://example.com/badminton">Badminton</option>
            <option value="http://example.com/baseball">Baseball</option>
        </select>

        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
            </svg>
        </div>

    </div>

</div>

<script>
    let selectElement = document.querySelector('#selectElement');
    selectElement.addEventListener('change', (event) => {
        window.open(event.target.value, '_top');
    })
</script>