4

Здравствуйте уважаемые пользователи сайта, не судите строго. с js сложновато. Как сделать такой Select, чтобы внутри были пункты которые можно выбрать и ниже была ещё кнопка.

Может есть плагин какой то ?

1
  • Здравствуйте. Это не select, select так не сверстать, даже и пробовать не стоит, хотя ради изучения этого вопроса можно. Берется select и скрывается средствами CSS. Далее берется обычный список ul>li, у него пункты будут как у нашего select, стилизуется как нужно. Средствами JS отслеживаем клики по нашему списку(ul) и переносим выбранный пользователем пункт в select, готово. Действуйте. 17 авг 2018 в 11:44

1 ответ 1

4

Проблема у вас не с JavaScript, а вообще с пониманием верстки, а именно того, как реализуются подобные выпадающие списки.

Берется select и скрывается средствами CSS. Далее создается обычный список ul>li, у него пункты будут как у нашего select, стилизуется как нужно. Средствами JS отслеживаем клики по нашему списку(ul) и переносим выбранный пользователем пункт в 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>

А вот пример, где наш 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);
});
.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>

2
  • 1
    Спасибо, очень помогли. 20 авг 2018 в 16:28
  • Спасибо! Я еще дополнил для полноты картины и завершения действия я добавил .change(); в конец функции $('.sorting-dropdown-item-link').click(function(event) { ..... .prop('selected', true) .change(); } 21 мая 2020 в 16:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.