Как при открытии одного select закрыть другой?

Question

[TipTop89]

Как при открытии одного select закрыть другой select? Спасибо за помощь

Answer 1

[MrColdCoffee]

Вы убираете/добавляете класс только у элемента, на который был совершён клик, а надо сначала убрать класс у всех элементов, а затем изменить у кликнутого:

selectBtn.addEventListener("click", function (e) {				
        let elem_active = optionMenu.classList.contains("_active")
        optionMenus.forEach(opt => {
          opt.classList.remove('_active');
        })
        optionMenu.classList.toggle("_active",!elem_active)
			});

Answer 2

[Stalker_RED]

Возможно будет правильнее не "закрыть другие селекты", а "закрывать селект при клике вне его выпадающего списка".

Таким образом вы решите не только проблему нескольких открытых селектов, но и "открыли селект, потом кликаем где-то по другим полям, но селект не закрылся и мешает".

Также можно прикрутить закрытие по esc.

Answer 3

[Froggyweb]

Использовать нативный тег select, а для стилизации использовать js оттестированный например select2.
иначе будет слишком много косяков юзабильности. Это и переход по таб и раскрытие стрелкой и выбор через энтер....