При выборе одно из пунктов в выпадающем списке, он почему-то не отображается. Почему?
Сам сайт http://ilyin1ib.beget.tech/
const selectSingle = document.querySelector('.__select');
const selectSingle_title = selectSingle.querySelector('.__select__title');
const selectSingle_labels = selectSingle.querySelectorAll('.__select__label');
// Toggle menu
selectSingle_title.addEventListener('click', () => {
if ('active' === selectSingle.getAttribute('data-state')) {
selectSingle.setAttribute('data-state', '');
} else {
selectSingle.setAttribute('data-state', 'active');
}
});
// Close when click to option
for (let i = 0; i < selectSingle_labels.length; i++) {
selectSingle_labels[i].addEventListener('click', (evt) => {
selectSingle_title.textContent = evt.target.textContent;
selectSingle.setAttribute('data-state', '');
});
}
html,
body {
font-family: 'Montserrat', sans-serif;
line-height: 1;
scroll-behavior: smooth;
background-color: #E5E5E5;
height: 100%;
width: 100%;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1280px;
padding: 40px 80px;
box-sizing: border-box;
margin: 0 auto;
}
.item {
display: flex;
justify-content: space-between;
width: 100%;
background-color: #fff;
box-shadow: 0px 24px 80px rgba(0, 0, 0, 0.1);
border-radius: 1px;
}
.col {
width: 50%;
height: 100%;
}
.img {
display: flex;
position: relative;
background: url(../img/big-bg.png) center no-repeat;
background-size: 100% 100%;
min-height: 500px;
min-width: 560px;
}
.img img {
position: absolute;
left: 10px;
right: 0;
bottom: 42px;
margin: auto;
}
.img-info {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
}
h1 {
font-weight: 700;
color: #fff;
font-size: 18px;
padding: 40px !important;
}
.img span {
font-weight: bold;
text-transform: uppercase;
font-size: 18px;
color: #fff;
padding: 0 0 40px 40px;
}
.form-block {
text-align: center;
}
.title {
background-color: #F8F8F8;
padding: 30px;
border-radius: 30px;
}
h2 {
font-weight: 800;
font-size: 30px;
color: #212121;
}
form {
padding: 50px 100px !important;
}
label {
text-transform: uppercase;
text-align: left;
width: 100%;
font-weight: 800;
font-size: 12px;
display: inline-block;
margin-bottom: 10px !important;
}
.green {
color: #428A60;
}
input {
display: block;
margin: 0 auto;
border: 1px solid #E4E4E4;
box-sizing: border-box;
border-radius: 5px !important;
background: #F8F8F8;
padding: 15px 20px;
width: 100%;
margin-bottom: 20px !important;
}
input::placeholder {
font-weight: 600;
font-size: 14px;
}
.phone-block {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
}
.phone-block input {
margin-bottom: 0 !important;
}
button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px;
background: #428A60;
border-radius: 5px !important;
border: none;
color: #fff;
cursor: pointer;
transition: 0.3s;
}
button i {
margin-left: 10px;
}
button:hover {
background-color: #3BC374;
color: #000;
}
.__select {
position: relative;
width: 116px;
height: 47px;
margin: 0 auto;
}
.__select[data-state="active"] .__select__title::before {
transform: translate(-3px, -50%) rotate(-45deg);
}
.__select[data-state="active"] .__select__title::after {
transform: translate(3px, -50%) rotate(45deg);
}
.__select[data-state="active"] .__select__content {
opacity: 1;
}
.__select[data-state="active"] .__select__label + .__select__input + .__select__label {
max-height: 40px;
border-top-width: 1px;
}
.__select__title {
display: flex;
align-items: center;
width: 100%;
height: 100%;
padding: 8px 16px;
border-radius: 5px;
border: solid 1px #c7ccd1;
cursor: pointer;
background: #F8F8F8;
}
.__select__title::before, .__select__title::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
display: block;
width: 10px;
height: 2px;
transition: all 0.3s ease-out;
background-color: #333;
transform: translate(-3px, -50%) rotate(45deg);
}
.__select__title::after {
transform: translate(3px, -50%) rotate(-45deg);
}
.__select__title:hover {
border-color: #d8093a;
}
.__select__title:hover::before, .__select__title:hover::after {
background-color: #d8093a;
}
.reset {
display: flex;
width: 230px;
padding: 8px 16px;
margin: 0 auto;
margin-bottom: 10px;
border: solid 1px #c7ccd1;
border-radius: 5px;
transition: all 0.2s ease-out;
cursor: pointer;
font-weight: bold;
background-color: #fff;
color: #333;
}
.reset:hover {
background-color: #d8093a;
color: #fff;
}
.__select__content {
position: absolute;
top: 40px;
right: 0;
left: 0;
display: flex;
flex-direction: column;
background-color: #fff;
border: 1px solid #c7ccd1;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
transition: all 0.3s ease-out;
opacity: 0;
z-index: 8;
}
.__select__input {
display: none;
}
.__select__input:checked + label {
background-color: #dedede;
}
.__select__input:disabled + label {
opacity: 0.6;
pointer-events: none;
}
.__select__label {
display: flex;
align-items: center;
width: 100%;
height: 40px;
max-height: 0;
padding: 0 16px;
transition: all 0.2s ease-out;
cursor: pointer;
overflow: hidden;
}
.__select__label + input + .__select__label {
border-top: 0 solid #c7ccd1 60;
}
.__select__label:hover {
background-color: #d8093a !important;
color: #fff;
}
.flag span {
font-weight: 600;
font-size: 14px;
margin-right: 10px;
}
.flag img {
width: 26px;
height: 18px;
}
@media (max-width: 1200px) {
.img {
min-width: 460px;
}
h1 {
padding: 20px !important;
}
.img span {
padding: 0 0 20px 20px !important;
}
}
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/clear.css" rel="stylesheet" type="text/css" />
<link href="css/adaptive.css" rel="stylesheet" type="text/css" />
<script src="js/js.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet">
<title>Редуслим</title>
</head>
<body>
<div class="wrapper">
<div class="item">
<div class="col img">
<div class="img-info">
<h1>Reduslim</h1>
<span>eco</span>
</div>
<img src="img/tablets.webp" alt="tablets">
</div>
<div class="col form-block">
<div class="title">
<h2>Сделай шаг<br>к выздоровлению</h2>
</div>
<form action="#" method="post">
<label for="name">ваше <span class="green">имя</span></label>
<input type="text" name="user_name" required id="name" placeholder="Алексей">
<div class="phone-block">
<div class="number">
<label for="phone">ваш <span class="green">телефон</span></label>
<input type="text" name="user_phone" required id="phone" placeholder="+7 (123) 456 78-90">
</div>
<div class="__select" data-state="">
<div class="__select__title flag" data-default="Option 0">
<span>RU</span>
<img src="img/ru.svg" alt="ru">
</div>
<div class="__select__content">
<input id="singleSelect0" class="__select__input" type="radio" name="singleSelect" checked />
<label for="singleSelect0" class="__select__label">
</label>
<input id="singleSelect1" class="__select__input" type="radio" name="singleSelect" />
<label for="singleSelect1" class="__select__label flag">
<span>GR</span>
<img src="img/gr.svg" alt="gr">
</label>
<input id="singleSelect3" class="__select__input" type="radio" name="singleSelect" />
<label for="singleSelect3" class="__select__label flag">
<span>UK</span>
<img src="img/uk.svg" alt="">
</label>
<input id="singleSelect4" class="__select__input flag" type="radio" name="singleSelect" />
<label for="singleSelect4" class="__select__label flag">
<span>RU</span>
<img src="img/ru.svg" alt="ru">
</label>
</div>
</div>
</div>
<button>Заказать<i class="fas fa-arrow-right"></i></button>
</form>
</div>
</div>
</div>
</body>