Сейчас селектор выглядит так, но мне нужно чтобы вместо цифр появлялся флаг, ниже в html он как img. Заранее спасибо.
<div class="select is-active">
<div class="select__header">
<span class="select__current">1</span>
<div class="select__icon">×</div>
</div>
<div class="select__body">
<div class="select__item en"><img src="" alt="en">2</div>
<div class="select__item ru"><img src="" alt="ru">3</div>
<div class="select__item cn"><img src="" alt="cn">4</div>
</div>
</div>
.select {
margin: 0 auto;
position: relative;
width: 30.17px;
height: 16.8px;
}
.select.is-active .select__body {
display: block;}
.select__header {
border: 1px solid #ccc;
cursor: pointer;
display: flex;
width: 30.17px;
height: 16.8px;
}
.select__current {
font-size: 18px;
line-height: 24px;
}
.select__icon {
align-items: center;
display: flex;
flex-shrink: 0;
justify-content: center;
margin-left: auto;
text-align: center;
width: 40px;
margin-left: 20px;
}
.select__body {
border-top: 0;
display: none;
left: 0;
position: absolute;
right: 0;
top: 210%;
}
.select__item {
cursor: pointer;
width: 30.17px;
height: 16.8px;
margin-bottom: 20px;
}
.select__item:hover {
background-color: #f2f2f2;
}
let select = function () {
let selectHeader = document.querySelectorAll('.select__header');
let selectItem = document.querySelectorAll('.select__item');
selectHeader.forEach(item => {
item.addEventListener('click', selectToggle);
});
selectItem.forEach(item => {
item.addEventListener('click', selectChoose);
});
function selectToggle() {
this.parentElement.classList.toggle('is-active');
}
function selectChoose() {
let text = this.textContent,
select = this.closest('.select'),
currentText = select.querySelector('.select__current');
currentText.textContent = text;
select.classList.remove('is-active');
}
};
select();
