JSFiddle - React, Tailwind, and code Playground

by Calvin Ananda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<ul class="list-unstyled">
    <li class="init">[SELECT]</li>
      <li data-value="value 1"><span style="color:#EFAE00">&#xf0c8;</span> Maple Gold</li>
  <li data-value="value 2"><span style="color:#000316">&#xf0c8;</span> Midnight Black</li>
  <li data-value="value 3"><span style="color:#B7A8BA">&#xf0c8;</span> Orchid Gray</li>
</ul>

CSS

ul { 
    font-family: 'FontAwesome';
    height: 30px;
    width: 150px;
    border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

JavaScript

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});