Как сделать такой select?

$('.sorting-dropdown-select').click(function(event) { 
  event.preventDefault(); 
  $(this) 
    .next('.sorting-dropdown') 
    .slideToggle('400'); 
  $(this).toggleClass('sorting-dropdown-select-active'); 
}); 
 
$('.sorting-dropdown-item-link').click(function(event) { 
  event.preventDefault(); 
 
  var selectValue = $(this).html(); 
  var selectDataId = $(this).attr('data-id'); 
 
  $('.sorting-dropdown-select') 
    .html(selectValue) 
    .toggleClass('sorting-dropdown-select-active') 
    .next('.sorting-dropdown') 
    .slideToggle('400'); 
 
  $('select[name="sorting-select"]') 
    .removeAttr('selected') 
    .find('option[value="' + selectDataId + '"]') 
    .prop('selected', true); 
});

.hide { 
  display: none; 
} 
 
.container { 
  max-width: 1170px; 
  margin: 0 auto; 
  width: 100%; 
} 
 
.sorting-title { 
  color: #999; 
  display: block; 
  font-size: 15px; 
  margin-right: 5px; 
} 
 
.sorting-select-area { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: start; 
  -ms-flex-pack: start; 
  justify-content: flex-start; 
  min-width: 254px; 
  position: relative; 
} 
 
.sorting-dropdown-select { 
  color: #000; 
  font-size: 15px; 
  font-weight: 700; 
  position: relative; 
  text-decoration: none; 
} 
 
.sorting-dropdown-select:hover { 
  color: #000; 
} 
 
.sorting-dropdown-select:before { 
  background-image: -webkit-gradient( linear, left top, right top, color-stop(33%, black), color-stop(0%, rgba(255, 255, 255, 0))); 
  background-image: linear-gradient( to right, black 33%, rgba(255, 255, 255, 0) 0%); 
  background-position: bottom; 
  background-size: 3px 1px; 
  background-repeat: repeat-x; 
  bottom: 0; 
  content: ''; 
  height: 1px; 
  left: 0; 
  position: absolute; 
  width: 100%; 
} 
 
.sorting-dropdown-select.sorting-dropdown-select-active { 
  color: #e2001a; 
} 
 
.sorting-dropdown-select.sorting-dropdown-select-active:before { 
  display: none; 
} 
 
.sorting-dropdown { 
  background-color: #fff; 
  -webkit-box-shadow: 0px 17px 14px 0px rgba(0, 0, 0, 0.05); 
  box-shadow: 0px 17px 14px 0px rgba(0, 0, 0, 0.05); 
  display: none; 
  left: 0; 
  overflow: hidden; 
  position: absolute; 
  top: 100%; 
  width: 100%; 
  z-index: 5; 
} 
 
.sorting-dropdown .sorting-dropdown-items { 
  list-style: none; 
  margin: 13px 0 0; 
  padding-left: 0; 
} 
 
.sorting-dropdown .sorting-dropdown-item-link { 
  color: #000; 
  display: block; 
  font-size: 15px; 
  font-weight: 400; 
  padding: 5px 30px; 
  transition: all 0.3s; 
} 
 
.sorting-dropdown .sorting-dropdown-item-link:hover { 
  background-color: #f5f5f5; 
} 
 
.red-btn { 
  background-color: red; 
  color: #ffffff; 
  display: inline-block; 
  margin: 10px 0 10px 30px; 
  padding: 5px; 
} 
 
button[type='submit'] { 
  margin-top: 50px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <form action="#" class="sorting-form"> 
    <!-- begin Hiding Select --> 
    <select name="sorting-select" class="hide"> 
      <option value="priceLow">Цена по возростанию</option> 
      <option value="priceHigh">Цена по убыванию</option> 
      <option value="nameAZ">По названию А-Я</option> 
      <option value="nameZA">По названию Я-А</option> 
    </select> 
    <!-- end Hiding Select --> 
    <!-- begin Select Custom --> 
    <div class="sorting-select-area"> 
      <span class="sorting-title d-block">Сортировка:</span> 
      <a href="#" class="sorting-dropdown-select">Цена по возрастанию</a> 
      <!-- begin Sorting Dropdown --> 
      <div class="sorting-dropdown"> 
        <ul class="sorting-dropdown-items"> 
          <li class="sorting-dropdown-item"> 
            <a href="#" data-id="priceLow" class="sorting-dropdown-item-link">Цена по возрастанию</a> 
          </li> 
          <li class="sorting-dropdown-item"> 
            <a href="#" data-id="priceHigh" class="sorting-dropdown-item-link">Цена по убыванию</a> 
          </li> 
          <li class="sorting-dropdown-item"> 
            <a href="#" data-id="nameAZ" class="sorting-dropdown-item-link">По названию А-Я</a> 
          </li> 
          <li class="sorting-dropdown-item"> 
            <a href="#" data-id="nameZA" class="sorting-dropdown-item-link">По названию Я-А</a> 
          </li> 
          <li class="sorting-dropdown-item"> 
            <a href="#" class="red-btn">Добавить адрес</a> 
          </li> 
        </ul> 
      </div> 
      <!-- end Sorting Dropdown --> 
    </div> 
    <!-- end Select Custom --> 
    <button type="submit">Отправить</button> 
  </form> 
</div>