Замена стандартного селекта

by AJIEKCEU

HTML

<div class="select_wrp">
  <select class="select">
    <option>Наличные</option>
    <option>Безналичные</option>
  </select>
  <span class="chosen">Наличные</span>
  <ul class="select_list">
    <li>Наличные</li>
    <li>Безналичные</li>
    <li>Безналичные расчет</li>
    <li>Только по доставке товара</li>
  </ul>
</div>

CSS

.select{
  display: none;
}
  

.select_wrp{
  display: table;
  height: 35px;
  position: relative;
  border: 1px solid #627388;
  padding: 0 50px 0 12px;
  cursor: pointer;
}

.select_wrp:before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -5px;
    border-top: 11px solid #4b4f57;
    border-left: 6.5px solid transparent;
    border-right: 6.5px solid transparent;
}
.select_wrp:after{
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    right: 35px;
    border-left: 1px solid #627388;
    top: 0;
}

.select_list{
  display: none;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  z-index: 2;
  background-color: #fff;
  border: 1px solid #627388;
  overflow-y: auto;
  max-height: 200px;
}

.select_list  li{
    padding: 5px 12px;
}
.select_list  li:hover{
  background-color: #627388;
  color: #fff;
}
.select_list  li.active{
      background-color: orange;
      color: #fff;
}
.chosen{
  position: relative;
  line-height: 33px;
  display: block;
  height: 33px;
  overflow: hidden;
}

JavaScript

/*выбор в поле select*/
    $('.select_wrp').on('click', function(e){
    	var thisList = $(this).children('.select_list');
    	$('.select_list').stop(true).slideUp(100);
    	thisList.stop(true).slideToggle(100);
    });

    $('.select').each(function(){
    	var that = $(this),
    			thatVal = that.children('option:selected').text(),
    			thatIndex = that.children('option:selected').index()+1,
    			thatParent = that.closest('.select_wrp');
    	thatParent.find('.chosen').text(thatVal);
    	thatParent.find('.select_list li:nth-child('+thatIndex+')').addClass('active');
    });
    $('.select_list li').on('click', function(){
    	var that = $(this),
    			thatVal = that.text();
    			thatIndex = that.index()+1,
    			thatParent = that.closest('.select_wrp');
    	thatParent.children('.chosen').text(thatVal);
    	thatParent.find('.select option:nth-child('+thatIndex+')').attr('selected', 'selected');
    	thatParent.find('li').removeClass('active');
    	that.addClass('active');
    });
    $(document).on('click', function(e){
      if($(e.target).closest(".select_wrp").length) 
      return;
      $('.select_list').slideUp(100);
      e.stopPropagation();
    });