Нашел на просторах интернета код стилизации 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>