$$plugins.define('select', ['domHelper'], function (element, options, $) { var list = element.querySelector('.select__listWrap'), selected = $('.select__button'), selectedMob = element.querySelector('.select__button--mobile'), input = element.querySelector('.select__input'), options = $('.select__option'); function open() { element.classList.add('select--open'); $(list).slideDown(250); } function close() { $(list).slideUp(250, function () { element.classList.remove('select--open'); }); } document.addEventListener('click', function (event) { if (!isOpen() || element == event.target || $(event.target).parents().contains(element)) { return; } close(); }); selected.on("click", function (e) { e.preventDefault(); if (element.classList.contains('select--open')) { close(); } else { open(); } }); function isOpen() { return element.classList.contains('select--open'); } options.on('click', function (e) { e.target.classList.add('selected'); prevActiveOption = Object.values(element.querySelectorAll('.selected')).filter(prevActive => prevActive !== e.target); if (prevActiveOption.length != 0) { prevActiveOption[0].classList.remove('selected'); } selected.text(e.target.innerHTML); if (selectedMob) { selectedMob.innerHTML = e.target.innerHTML; } $(input).val(e.target.dataset.value).trigger('change'); close(); }); });