JSFiddle - React, Tailwind, and code Playground

by chadarsenault

HTML

<div id="dropdown-wrapper">
	<div id="categories-container" class="dropdown-containers">
		Categories
        <div id="categories-dropdown" class="dropdown">        
            <ul id="categories-list" class="dropdown-list"></ul>
	    </div>
    </div>
	<div id="species-container" class="dropdown-containers">
		Species
        <div id="species-dropdown" class="dropdown">
            <ul id="species-list" class="dropdown-list"></ul>
        </div>
	</div>
</div>

CSS

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
}
.dropdown-containers {
	display: inline-block;
	width: 10rem;
}
.dropdown {
	width: 10rem;
	height: 40px;
	border: 1px solid #000;
	position: absolute;
	top: 30px;
	display: block;
	overflow: hidden;
	cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.dropdown.show {
	overflow: visible;
    height: auto;
}
.dropdown > ul {
    display: block;
    width: 100%;
    margin:0;
    padding:0;
    position: absolute;
    top: 0;
}
.dropdown > ul > li {
	height: 40px;
    padding: 10px;
	display: block;
}
.dropdown li:hover {
	background-color: #9cf;
}

JavaScript

var SelectMenu = {
    settings: {
        categories: [
            '- Any -',
            'Traditional Breaded',
            'Seasoned Breaded',
            'Battered',
            'Pan Sear',
            'Grill',
            'Sauced'
        ],
        species: [
            '- Any -',
            'Alaska Pollock',
            'Cod',
            'Haddock',
            'Salmon',
            'Shrimp',
            'Sole',
            'Tilapia'
        ]
    },
    
    init: function() {
        data = this.settings;
        this.buildCategories(data.categories, data.categories[0]);
        this.buildSpecies(data.species, data.species[0]);
        this.showHide();
        this.reorder();
    },
        
    buildCategories: function(data, selected) {
        $('#categories-list').empty();
        
        var cats = [];
        cats.push(selected);
        for(var i = 0; i < data.length; i++) {
            if(data[i] !== selected) {
                cats.push(data[i]);
            }
        }
        
        for(var i = 0; i < cats.length; i++) {
            if(selected === cats[i]) {
                $('#categories-list').append('<li class="list-item selected" data-item="' + cats[i] + '">' + cats[i] + '</li>');
            } else {
                $('#categories-list').append('<li class="list-item" data-item="' + cats[i] + '">' + cats[i] + '</li>');
            }
        }
    },
    
    buildSpecies: function(data, selected) {
        $('#species-list').empty();
        
        var species = [];
        species.push(selected);
        for(var i = 0; i < data.length; i++) {
            if(data[i] !== selected) {
                species.push(data[i]);
            }
        }
        
        for(var i = 0; i < species.length; i++) {
            if(selected === species[i]) {
                $('#species-list').append('<li class="list-item selected" data-item="' + species[i] + '">' + species[i] + '</li>');
            } else {
               ...