JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<select name="sizes" id="sizes" class="makePlain" title="Select a size:">
    <option value="xxs">XX-Small</option>
    <option value="xs">X-Small</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
    <option value="xl">X-Large</option>
    <option value="xxl">XX-Large</option>
</select>

CSS

ul.plainSelect {
    border: 1px solid #000;
}
ul.plainSelect li {
    background-color: #f90;
    display: list-item;
}
ul.plainSelect li.guidance {
    border-bottom: 1px solid #000;
    padding: 0.3em;
    font-weight: bold;
    font-size: 1.2em;
    background-color: #fff;
}

ul.plainSelect li.unselected {
    background-color: #fff;
    display: none;
}

ul.plainSelect:hover li,
ul.plainSelect:hover li.unselected {
    display: list-item;
}

JavaScript

(function($) {
    $.fn.selectUl = function(){
        var $origSelect = $(this);
        var newId = $(this).attr('name') + '-ul';
        var numOptions = $(this).children().length;
        
        $('<ul id="' + newId + '" class="plainSelect" />')
            .insertAfter($(this));
        $('<li class="guidance" />')
            .text($(this).attr('title'))
            .appendTo('#' + newId);
        
        for (var i = 0; i < numOptions; i++) {
            var text = $(this).find('option').eq(i).text();
           $('<li />').text(text).appendTo('#' + newId);
        }
        
        if ($(this).find('option:selected')) {
            var selected = $(this).find('option:selected').index();
            $('#' + newId)
                .find('li')
                .not(':eq(' + selected + 1 + '), .guidance')
                .addClass('unselected');
        }
        
        $('#' + newId + ' li')
            .hover(
                function(){
                    $(this).click(
                        function(){
                            var newSelect = $(this).index() - 1;
                            $(this)
                                .parent()
                                .find('.unselected')
                                .removeClass('unselected');
                            $(this)
                                .parent()
                                .find('li')
                                .not(this)
                                .not('.guidance')
                                .addClass('unselected');
                            $($origSelect)
                                .find('option:selected')
                                .removeAttr('selected');
                            $($origSelect)
                                .find('option:eq(' + newSelect +')')
                                .attr('selected',true);
                        });
                },
                function(){
            });
                   ...