JSFiddle - React, Tailwind, and code Playground

by Виталий Инчин

HTML

<div style="width: 400px; margin: 50px auto 0;">



<div class="select">
	<div class="selected"></div>
	<ul class="list"></ul>	
	<select>
		<option>Red Hat</option>
		<option>Ubuntu</option>
		<option>Debian</option>
		<option>OpenSuse</option>
		<option>Fedora</option>
	</select>
</div>
<div class="select">
	<div class="selected"></div>
	<ul class="list"></ul>	
	<select>
		<option>Red sHat</option>
		<option>Ubuntu</option>
		<option>Debian</option>
		<option>OpenSuse</option>
		<option>Fedora</option>
	</select>
</div>




</div>

CSS

* {
    box-sizing: border-box;
}
.select {
     position: relative;
	 cursor: pointer; 
    width: 200px;
	float: left;
}
.select .selected {
    width: 100%;
    height: 30px;
    display: block;
    padding: 0 27px 0 10px;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    line-height: 30px;
}
.select ul {	
	width: 100%;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: #d9d9d9;	
	background: #fff;
	border-radius: 0 0 3px 3px;
	position: absolute;
    top: 100%;
    left: 0;
	display: none;
	z-index: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}
.select .focus {
	border-radius: 3px 3px 0 0;
}
.select li {
	height: 30px;
	padding: 0 10px;
	line-height: 30px;
}
.select select {
    display: none;
}

JavaScript

$(function(){
	$(".select").each(function(i){
        var currentElem = $(this),
           currentSelect = $(this).find("select"),
           currentList = $(this).find(".list"),
           currentDate = $(this).find(".selected");
        
        $(currentDate).text(currentSelect.val());
        currentSelect.find("option").each(function(){
			currentList.append('<li>' + $(this).text() + '</li>');
		});
        
        currentList.on("click", "li", function(){
      		 currentDate.text($(this).text()); 
       		 currentSelect.val($(this).text());
    	});
        
        $(this).click(function(){
            currentDate.hasClass('focus') ?
               currentList.slideUp(300) : 
                  currentList.slideDown(300);
            currentDate.toggleClass('focus');
        });
    });


});