Свой селект
Напишите свой, самостоятельно оформленный, селект.
Требования:
- Открытие и закрытие по клику на заголовок.
- Закрытие селекта происходит при выборе или клике на любое другое место документа, в том числе на другой аналогичный селект.
- Событие
"select"при выборе опции возникает на элементе селекта и всплывает. - Значение опции хранится в атрибуте
data-value(HTML-структура есть в исходном документе).
Например:
В примере выше два селекта, чтобы можно было проверить процесс открытия-закрытия.
В этом решении для закрытия селекта по клику вне него используется отслеживание произвольных кликов внутри документа.
Альтернатива – события focusin/focusout, т.е. считаем, что пока фокус в селекте – он открыт. С одной стороны, это более мощный способ, он позволяет перемещаться по элементам управления при помощи Tab и корректно обрабатывать уход при помощи клавиатуры.
С другой стороны, это решение не универсально: если выводится alert, то фокус «прыгает» в него, уходя с элемента, а потом возвращается обратно. При этом JavaScript зарегистрирует уход фокуса focusout и возвращение focusin, хотя по смыслу фокус с элемента никуда не уходил, просто был alert.
Побочный эффект – закрытие и (лишнее) раскрытие элемента управления при таких «ненамеренных» потерях фокуса. Поэтому был выбран onclick.
Решение: