DropDown

Customized Drop-down for More Styled Layout

by Dhruvang Gajjar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dropdown">
  <select>
    <option>Select Value</option>
    <option value="Hello">Hello</option>
    <option value="How">How</option>
    <option value="howdy">howdy</option>
  </select>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

.open_option {
  background-color: #fff;
  float: left;
  padding: 10px;
  width: 200px;
  position: relative;
  z-index: 9999;
}

.open_option:after {
  content: '\25BE';
  position: absolute;
  right: 10px;
  font-size: 25px;
  top: 2px;
}

div#dropdown {
  float: left;
}

ul.options {
  position: absolute;
  top: 40px;
  background-color: #fff;
  width: 220px;
  list-style-type: none;
}

.options li {
  padding: 10px;
}

.options li.selected {
  cursor: not-allowed;
  color: #ccc;
}

.options li:not(.selected):hover {
  background-color: dodgerblue;
  color: #fff;
}

JavaScript

function dropdown(selector) {
  $(selector).find('select').hide();
  $(selector).find('select').before('<ul class="options"></ul>');
  $(selector).find('select').find('option').each(function(i, el) {
    var option = $(this).text();
    $(selector).find(".options").append('<li>' + option + '</li>');
  });
  var title = $(selector).find(".options").find('li').first().text();
  $(selector).find(".options").before('<p class="open_option">' + title + '</p>');
  $(selector).find(".options").hide();
  $(selector).find(".options").find('li').first().addClass('selected')
  $(selector).find(".open_option").click(function(e) {
    e.stopPropagation();
    $(selector).not(this).find(".options").slideToggle('fast');

  });

  $(selector).find(".options li:not(.selected)").click(function() {
    var selectedVal = $(this).html();
    $(selector).find(".open_option").text(selectedVal);
    $(selector).find('select').val($(selector).find(".open_option").text()).change();
    $(selector).find(".options").slideUp('fast');
  });
}


dropdown("#dropdown");