добавление атрибута selected к option, для отправления его на сервер

[fl4shK]

Всем привет, столкнулся с проблемой реализации выпадающего списка.
Функционал анимации с помощью чистого js реализовал, но есть проблема в отправки выбранного элемента на сервер, просто не отправляется, те кто сталкивались с этой проблемой, либо были приближены к ней, буду очень благодарен за помощь.

Верстка выпадающего списка html:

<div class="select__box--header">
    <div class="options__container--header options__container">
      <div class="option--header option">
          <option value="EN">EN</option>
       </div>
        
       <div class="option--header option">
           <option value="ES">ES</option>
       </div>
    </div>
    <div class="selected--header lang selected">RU</div>
</div>

.select__item--header {
    margin-right: 40px;
    &:last-child {
        margin-right: 0;
    }
}

.select__item--header.language {
    width: 105px;
    
}


.select__box--header {
    display: flex;
    width: 100%;
    flex-direction: column;
    position: relative;
}

.select__box--header .options__container--header {
    background-color: #fff;
    color: #6d2568;
    border: 1px solid #ccc;
    max-height: 0;
    width: inherit;
    border: 1px solid #999999;
    opacity: 0;
    border-radius: 10px;
    overflow: hidden;
    transition: all .3s;
    order: 1;
    position: absolute;
    top: 55px;
    z-index: 100;
}

.selected--header {
    background-color: #f2f2f2;
    border-radius: 22px;
    font-family: 'Lato', sans-serif;
    height: 44px;
    color: #6d2568;
    order: 0;
    position: relative;
    cursor: pointer;
    transition: all 0.4s;

    &::after {
        content: '';
        display: block;
        background: url('../img/icons/arrow/arrowsvg.svg');
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        width: 9px;
        height: 5px;
        top: 21px;
        right: 15px;
        transition: all 0.4s;
    }

    &:hover {
        background-color: #6d2568;
        color: #fff;
    }
}

.selected--header:hover::after {
     background: url('../img/icons/arrow/arrowsvg-h.svg');
}

.selected--header.lang::before {
    content: '';
    display: block;
    background: url('../img/icons/icons/01.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    position: absolute;
    left: 18px;
    top: 15px;
    transition: background .3s linear;
}

.selected--header.lang:hover::before {
    background: url('../img/icons/icons/01-h.svg');
}


.select__box--header .options__container--header.active {
    max-height: 400px;
    opacity: 1;

}

.select__box--header .options__container--header.active + .selected--header::after {
    transform: rotateX(180deg);
    
}


.select__box--header .option--header, .selected--header {
    padding: 16px 36px 16px 50px;
}

.select__box--header .option--header:hover {
    background-color: #6e2669;
    color: #fff;
}


.select__box--header option {
    cursor: pointer;
}

Скрипт реализации анимации:

const selectedAll = document.querySelectorAll(".selected");

selectedAll.forEach(selected => {
    const optionsContainer = selected.previousElementSibling;
    const optionList = optionsContainer.querySelectorAll('.option');

    selected.addEventListener("click", () => {
        if (optionsContainer.classList.contains("active")) {
            optionsContainer.classList.remove("active");
        } else {
            let currentActive = document.querySelector(".options__container.active");

            if (currentActive) {
                currentActive.classList.remove("active");
            }
            optionsContainer.classList.add("active");
        }
    });


    optionList.forEach(o => {
        o.addEventListener("click", () => {
            selected.innerHTML = o.querySelector("option").innerHTML;
            optionsContainer.classList.remove("active");
            
            
        });
    });

})

Я так подумал что добавление атрибута selected для option поможет, если это так, то написание данного скрипта у меня не вышло, с чем прошу помочь мне пожалуйста

[рони]

fl4shK,
может как-то использовать нормальный select?
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

загляните сюда
Реализовать примитивный дропдаун

[laimas]

option в div, это ни в какие ворота. Замените их на label + radio, последние как именованная группа и будете получать на сервере значение выбранной кнопки.

[рони]

fl4shK,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .select__item--header.language {
        width: 105px;
    }
    .select__box--header {
        display: flex;
        width: 100%;
        flex-direction: column;
        position: relative;
    }
    .select__box--header .options__container--header {
        background-color: #fff;
        color: #6d2568;
        border: 1px solid #ccc;
        max-height: 0;
        width: inherit;
        border: 1px solid #999;
        opacity: 0;
        border-radius: 10px;
        overflow: hidden;
        transition: all .3s;
        order: 1;
        position: absolute;
        top: 55px;
        z-index: 100;
    }
    .selected--header {
        background-color: #f2f2f2;
        border-radius: 22px;
        font-family: 'Lato', sans-serif;
        height: 44px;
        color: #6d2568;
        order: 0;
        position: relative;
        cursor: pointer;
        transition: all .4s;
        line-height: 44px;
    }
    .selected--header::after {
        content: '';
        display: block;
        background: url('../img/icons/arrow/arrowsvg.svg');
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        width: 9px;
        height: 5px;
        top: 21px;
        right: 15px;
        transition: all .4s;
    }
    .selected--header:hover {
        background-color: #6d2568;
        color: #fff;
    }
    .selected--header:hover::after {
        background: url('../img/icons/arrow/arrowsvg-h.svg');
    }
    .selected--header.lang::before {
        content: '';
        display: block;
        background: url('../img/icons/icons/01.svg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
        position: absolute;
        left: 18px;
        top: 15px;
        transition: background .3s linear;
    }
    .selected--header.lang:hover::before {
        background: url('../img/icons/icons/01-h.svg');
    }
    .select__box--header.active .options__container--header {
        max-height: 400px;
        opacity: 1;
    }
    .select__box--header.active .options__container--header + .selected--header::after {
        transform: rotateX(180deg);
    }
    .select__box--header .option--header, .selected--header {
        padding: 8px 36px 8px 50px;
    }
    .select__box--header .option--header:hover {
        background-color: #6e2669;
        color: #fff;
    }
    .select__box--header .option {
        cursor: pointer;
    }
    .select__box--header .option input {
        display: none;
    }
    :checked + label{
        font-weight: bold;
    }

    </style>
 </head>
<body>
<div class="select__box--header">
    <div class="options__container--header options__container">
      <div class="option--header option">
          <input name="lang" type="radio" value="EN"><label>EN</label>
       </div>
       <div class="option--header option">
           <input name="lang" type="radio" value="ES"><label>ES</label>
       </div>
       <div class="option--header option">
           <input name="lang" type="radio" value="RU" checked="checked"><label>RU</label>
       </div>
    </div>
    <div class="selected--header lang selected">RU</div>
</div>
<script>
const boxAll = document.querySelectorAll(".select__box--header");
boxAll.forEach(box => {
    box.addEventListener("click", ({target}) => {
        box.classList.toggle("active");
        if(target = target.querySelector("input")) {
          target.checked = true;
          box.querySelector(".selected").innerHTML = target.value;
        }
    });
})

</script>
</body>
</html>

[fl4shK]

option в div, это ни в какие ворота. Замените их на label + radio, последние как именованная группа и будете получать на сервере значение выбранной кнопки.

Спасибо, исправил

И Рони спасибо за помощь, сразу видно актив на форуме)

[laimas]

исправил

Только учтите, что "будете получать на сервере значение выбранной кнопки" справедливо только в том случае, если ваш список на флажках является элементом form и вы эту форму и отправляете на сервер. Браузер же отправляя форму, такие элементы как флажки и радио кнопки отправляет только выбранные, так и вы и получите значение выбранной кнопки. В противном случае только скриптом выбирать и отправлять.