Показать сообщение отдельно
  #1 (permalink)  
Старый 12.06.2020, 17:29
Новичок на форуме
Отправить личное сообщение для fl4shK Посмотреть профиль Найти все сообщения от fl4shK
 
Регистрация: 12.06.2020
Сообщений: 2

добавление атрибута selected к option, для отправления его на сервер
Всем привет, столкнулся с проблемой реализации выпадающего списка.
Функционал анимации с помощью чистого 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, 12.06.2020 в 17:54.
Ответить с цитированием