1

Нашел на просторах интернета код стилизации select, немного подправил стили под себя, но столкнулся в одной задачей и не могу ее исправить. Нужно чтобы по умолчанию был активен первый option, но данный код его полностью выбрасывает. Что нужно подправить в js коде?

$('.select').each(function() {
    const _this = $(this),
        selectOption = _this.find('option'),
        selectOptionLength = selectOption.length,
        selectedOption = selectOption.filter(':selected'),
        duration = 150; // длительность анимации 

    _this.hide();
    _this.wrap('<div class="select"></div>');
    $('<div>', {
        class: 'new-select',
        text: _this.children('option:disabled').text()
    }).insertAfter(_this);

    const selectHead = _this.next('.new-select');
    $('<div>', {
        class: 'new-select__list'
    }).insertAfter(selectHead);

    const selectList = selectHead.next('.new-select__list');
    for (let i = 1; i < selectOptionLength; i++) {
        $('<div>', {
            class: 'new-select__item',
            html: $('<span>', {
                text: selectOption.eq(i).text()
            })
        })
        .attr('data-value', selectOption.eq(i).val())
        .appendTo(selectList);
    }

    const selectItem = selectList.find('.new-select__item');
    selectList.slideUp(0);
    selectHead.on('click', function() {
        if ( !$(this).hasClass('on') ) {
            $(this).addClass('on');
            selectList.slideDown(duration);

            selectItem.on('click', function() {
                let chooseItem = $(this).data('value');

                $('select').val(chooseItem).attr('selected', 'selected');
                selectHead.text( $(this).find('span').text() );

                selectList.slideUp(duration);
                selectHead.removeClass('on');
            });

        } else {
            $(this).removeClass('on');
            selectList.slideUp(duration);
        }
    });
});
  .select {
    display: block;
    max-width: 215px;
    width: 85px;
    position: relative;
}

.new-select {
  border: 2px solid #ced4da;
  padding: 2px 15px;
  cursor: pointer;
  position: relative;
  float: right;
  width: 85px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  min-height: 20px
}

.new-select__list {
  border: 0px solid #ced4da;
  cursor: pointer;
  position: absolute;
  top: -8px;
  left: 12px;
  width: 100%;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fff;
  z-index: 10;
}

.new-select__list.on {
    display: block;
}

.new-select__item span {
    display: block;
    padding: 10px 15px;
}

.new-select__item spa:hover {
  color: #000000;
  font-weight: bold;
}
.new-select__item:hover{
background: #f2f2f2;
}
.new-select__item{
  border-bottom: 1px solid #f2f2f2;
  font-weight: 700;
  }
.new-select:after {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  right: 0px;
  top: 0px;
  background: url(../img/arrow_mini.svg) no-repeat right center / cover;
  opacity: 0.6;
  -webkit-transition: all .27s ease-in-out;
  -o-transition: all .27s ease-in-out;
  transition: all .27s ease-in-out;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  background-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
  <option selected value="USD">USD</option>
  <option value="TSJ">EURO</option>
  <option value="RUB">RUB</option>
</select>

1 ответ 1

2
+50

$('.select').each(function() {
  const _this = $(this),
    selectOption = _this.find('option'),
    selectOptionLength = selectOption.length,
    selectedOption = selectOption.filter(':selected'),
    duration = 150; // длительность анимации 

  _this.hide();
  _this.wrap('<div class="select"></div>');
  $('<div>', {
    class: 'new-select',
    //text: _this.children('option:disabled').text()
    text: _this.children('option:selected').text()
  }).insertAfter(_this);

  const selectHead = _this.next('.new-select');
  $('<div>', {
    class: 'new-select__list'
  }).insertAfter(selectHead);

  const selectList = selectHead.next('.new-select__list');
  //for (let i = 1; i < selectOptionLength; i++) {
  for (let i = 0; i < selectOptionLength; i++) {
    //
    //
    $('<div>', {
        class: 'new-select__item',
        html: $('<span>', {
          text: selectOption.eq(i).text()
        })
      })
      .attr('data-value', selectOption.eq(i).val())
      .appendTo(selectList);
  }

  const selectItem = selectList.find('.new-select__item');
  selectList.slideUp(0);
  selectHead.on('click', function() {
    if (!$(this).hasClass('on')) {
      $(this).addClass('on');
      selectList.slideDown(duration);

      selectItem.on('click', function() {
        let chooseItem = $(this).data('value');

        $('select').val(chooseItem).attr('selected', 'selected');
        selectHead.text($(this).find('span').text());

        selectList.slideUp(duration);
        selectHead.removeClass('on');
      });

    } else {
      $(this).removeClass('on');
      selectList.slideUp(duration);
    }
  });
});
.select {
  display: block;
  max-width: 215px;
  width: 85px;
  position: relative;
}

.new-select {
  border: 2px solid #ced4da;
  padding: 2px 15px;
  cursor: pointer;
  position: relative;
  float: right;
  width: 85px;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  min-height: 20px
}

.new-select__list {
  border: 0px solid #ced4da;
  cursor: pointer;
  position: absolute;
  top: -8px;
  left: 12px;
  width: 100%;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: #fff;
  z-index: 10;
}

.new-select__list.on {
  display: block;
}

.new-select__item span {
  display: block;
  padding: 10px 15px;
}

.new-select__item spa:hover {
  color: #000000;
  font-weight: bold;
}

.new-select__item:hover {
  background: #f2f2f2;
}

.new-select__item {
  border-bottom: 1px solid #f2f2f2;
  font-weight: 700;
}

.new-select:after {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  right: 0px;
  top: 0px;
  background: url(../img/arrow_mini.svg) no-repeat right center / cover;
  opacity: 0.6;
  -webkit-transition: all .27s ease-in-out;
  -o-transition: all .27s ease-in-out;
  transition: all .27s ease-in-out;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  background-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
  <option selected value="USD">USD</option>
  <option value="TSJ">EURO</option>
  <option value="RUB">RUB</option>
</select>
<select class="select">
  <option selected value="USD">USD</option>
  <option value="TSJ">EURO</option>
  <option value="RUB">RUB</option>
</select>
<select class="select">
  <option selected value="Fahbrf">Fahbrf</option>
  <option value="NBjrd">NBjrd</option>
  <option value="gugUGu">gugUGu</option>
</select>

4
  • > "Нужно чтобы по умолчанию был активен первый option"
    – vantal
    Commented 27 мая 2020 в 11:03
  • теперь показывает, строку тоже закомментировал чтобы видно было где изменил
    – IvaMuxa
    Commented 27 мая 2020 в 11:10
  • во, теперь вроде отлично
    – vantal
    Commented 27 мая 2020 в 11:11
  • Есть небольшой баг, при добавлении 2 и более селектов на странице, при выборе во втором, в первый ставится то же значение, а если такого же нет, то просто путое
    – vantal
    Commented 29 июн. 2020 в 17:30

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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