JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<div id="top">
<select></select>
</div>
<ul class="selectdropdown">
    <li><a href="one.html" target="_blank">one</a></li>
    <li><a href="two.html" target="_blank">two</a></li>
    <ul>
        <li><a href="twoOne.html" target="_blank">two One</a></li>
        <ul>
            <li><a href="twoOneOne.html" target="_blank">two One One</a></li>
        </ul>
        <li><a href="twoTwo.html" target="_blank">twoTwo</a></li>
    </ul>
    <li><a href="three.html" target="_blank">three</a></li>
    <li><a href="four.html" target="_blank">four</a></li>
    <li><a href="five.html" target="_blank">five</a></li>
    <li><a href="six.html" target="_blank">six</a></li>
    <li><a href="seven.html" target="_blank">seven</a></li>
</ul>

CSS

.selectdropdown{display:none;}

JavaScript

jQuery('.selectdropdown li a').each(function() {
        var el = jQuery(this);
        jQuery('<option />', {
            "value"   : el.attr('href'),
            "text"    : el.text()
        }).appendTo('#top select');
    });
    if (jQuery('.selectdropdown li a').length < 1) jQuery('#top').hide();

    jQuery('#top').find('select').change(function() {
        window.location = jQuery(this).find('option:selected').val();
    });