Custom Select

Custom Select with logic

by Dru Dro

HTML

<select id="sorter">

  <option value="Option1" selected="selected">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>

</select>

<div id="nice-sorter">
  <div id="current_sort" data-value="Option1">
    <span></span>

  </div>
  <ul id="custom_sort">

    <li data-value="Option1">Option1
    </li>
    <li data-value="Option2">Option2
    </li>
    <li data-value="Option3">Option3
    </li>

  </ul>

CSS

#sorter {
  display: none
}

#nice-sorter {
  width: 200px;
  height: 35px;
}

#current_sort {
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #EDEDED;
  padding: 8px 10px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}

#current_sort span {
  position: relative;
  color: #000;
}

#current_sort:hover {
  background: rgba(0, 0, 0, .05);
}

#current_sort:after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border: 1px solid #333;
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
  position: absolute;
  top: 9px;
  right: 15px;
}

#custom_sort {
  width: 100%;
  padding: 0;
  margin-top: -1px;
  background: #fff;
  border: 1px solid #EDEDED;
  border-top: 0;
  box-sizing: border-box;
  position: relative;
  display: none;
  z-index: 1;
}

#custom_sort li {
  list-style: none;
  padding: 8px 10px;
  width: 100%;
  height: 40px;
  z-index: 9999;
  cursor: pointer;
  box-sizing: border-box;
}

#custom_sort li:hover {
  background: rgba(0, 0, 0, .05);
}

JavaScript

function niceSorter() {
  $('#current_sort').attr("data-value", $('#sorter').val());
  $("#current_sort span").text($('#sorter :selected').text());
  $("#current_sort").click(function() {
    customOptionsBlock = $("#custom_sort");
    if (customOptionsBlock.is(":hidden")) {
      $("#custom_sort").show();
    } else {
      $("#custom_sort").hide();
    }
  });
  $(document).mouseup(function(e) {
    var custom_options = $("#custom_sort");
    if (!custom_options.is(e.target) && custom_options.has(e.target).length === 0) {
      custom_options.hide();
    }
  });

  $("#custom_sort li").click(function() {
    var choosenValue = $(this).attr("data-value");
    $("#sorter").val(choosenValue).prop("selected", true).change();
    $("#current_sort span").text($(this).text());
    $("#current_sort").attr("data-value", choosenValue);
    $("#custom_sort").hide();
  });

}
niceSorter();