16
Янв
2021

Что я тут сделал не так? Почему кастомный селект не выбирает вариант "Русский"?

Написал кастомный селект. Нашел в интернете, пару часов переделываю под себя. Уже почти рабочий, но русский не выбирается. Почему?

let select_current = document.querySelector(".select_current");
let sel_body = document.querySelector(".select_body");
let sel_item = document.querySelector(".select_item");
let sel_input = document.querySelector(".select_input");
select_current.addEventListener("click", (event)=>{
    sel_body.classList.toggle("is_active");
})
let a = new Array(sel_item);
a.forEach(elem => {
    elem.addEventListener("click", ()=>{
        let elemValue = elem.getAttribute("data-value");
        let elemText = elem.textContent;
        sel_input.value = elemValue;
        select_current.textContent = elemText;
        selectBodyHide();
    })
})

let selectBodyHide = () =>{
    sel_body.classList.remove("is_active");
};
//сделал моусап
document.addEventListener("mouseup", (e)=>{
    if (!select_current.contains(e.target)) selectBodyHide();
})
.select{
    display: flex;
    font-family: "Circe";
    font-size: 16px;
    line-height: 21px;
    color: white;
}
.select_header{
    display: flex;
    cursor: pointer;
}
.select_current{
    padding: 8px;
}
.select_body{
    display: none;
    flex-direction: column;
    border-top:0;
    position: absolute;
    margin-top: 40px;
}
body{
    background:rgba(0,0,0,0.5); 
}
.select_item{
    line-height: 24px;
    padding: 8px;
    font-size: 16px;
}
.select_item:hover, .select_current:hover{
    box-shadow: 0 0 10px white;
    cursor:pointer;
}
.is_active{
    display:flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="select">
                <input type="hidden" name="number" class="select_input">
                <div class="select_header">
                    <div class="select_current">Русский</div>
                </div>
                <div class="select_body">
                    <div class="select_item" data-value="English">English</div>
                    <div class="select_item" data-value="Russian">Русский</div>
                </div>
            </div>
   <script src="js.js"></script>    
</body>
</html>

Источник: https://ru.stackoverflow.com/questions/1232063/%D0%A7%D1%82%D0%BE-%D1%8F-%D1%82%D1%83%D1%82-%D1%81%D0%B4%D0%B5%D0%BB%D0%B0%D0%BB-%D0%BD%D0%B5-%D1%82%D0%B0%D0%BA-%D0%9F%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D0%BA%D0%B0%D1%81%D1%82%D0%BE%D0%BC%D0%BD%D1%8B%D0%B9-%D1%81%D0%B5%D0%BB%D0%B5%D0%BA%D1%82-%D0%BD%D0%B5-%D0%B2%D1%8B%D0%B1%D0%B8%D1%80%D0%B0%D0%B5%D1%82-%D0%B2%D0%B0%D1%80%D0%B8%D0%B0%D0%BD%D1%82-%D0%A0%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9

Тебе может это понравится...

Добавить комментарий