JSFiddle - React, Tailwind, and code Playground

by zedsaid

HTML

<div class="picker-list">
<ul>
			<li><a href="http://learning.southdowns.gov.uk/about-the-national-park" title="About The National Park">About The National Park</a>
					<ul>
			<li><a href="http://learning.southdowns.gov.uk/about-the-national-park/south-downs-national-park" title="South Downs National Park">South Downs National Park</a>
			</li>
						<li><a href="http://learning.southdowns.gov.uk/about-the-national-park/special-places" title="Special Places">Special Places</a>
			</li>
						<li><a href="http://learning.southdowns.gov.uk/about-the-national-park/protecting-the-landscape" title="(( Protecting the Landscape ))">Protecting the Landscape</a>
			</li>
					</ul>
			</li>
						<li><a href="http://learning.southdowns.gov.uk/geology-and-landscapes" title="Geology &amp; Landscapes">Geology &amp; Landscapes</a>
					<ul>
			<li><a href="http://learning.southdowns.gov.uk/geology-and-landscapes/geology" title="Geology">Geology</a>
			</li>
						<li><a href="http://learning.southdowns.gov.uk/geology-and-landscapes/chalk" title="Chalk">Chalk</a>
			</li>
						<li><a href="http://learning.southdowns.gov.uk/geology-and-landscapes/landscape-character" title="Landscape Character">Landscape Character</a>
			</li>
						<li><a href="http://learning.southdowns.gov.uk/geology-and-landscapes/water-a-valuable-resource" title="(( Water - A Valuable Resource ))">Water - A Valuable Resource</a>
			</li>
						<li><a href="http://learning.southdowns.gov.uk/geology-and-landscapes/water-cycle" title="(( Water Cycle ))">Water Cycle</a>
			</li>
						<li><a href="http://learning.southdowns.gov.uk/geology-and-landscapes/rivers" title="Rivers">Rivers</a>
			</li>
						<li><a href="http://learning.southdowns.gov.uk/geology-and-landscapes/coastal" title="(( Coastal ))">Coastal</a>
			</li>
					</ul>
			</li>
						<li><a href="http://learning.southdowns.gov.uk/wildlife-and-habitats" title="Wildlife &amp; Habitats">Wildlife &amp; Habitats</a>
					<ul>
			<li><a...

JavaScript

$('.picker-list ul').each(function() {
    
    var list = $(this);
    var select = $(document.createElement('select')).insertBefore($(this).hide());
    select.attr('multiple', 'multiple');
    
    $('> li a', this).each(function(){
        var option = $(document.createElement('option'))
        .appendTo(select)
        .val(this.href)
        .html($(this).html());
        if ($(this).attr('class') === 'selected'){
            option.attr('selected','selected');
        }
    });
    list.remove();
    
});