Вернуться к уроку

Свой селект

важность: 5

Напишите свой, самостоятельно оформленный, селект.

Требования:

  • Открытие и закрытие по клику на заголовок.
  • Закрытие селекта происходит при выборе или клике на любое другое место документа, в том числе на другой аналогичный селект.
  • Событие "select" при выборе опции возникает на элементе селекта и всплывает.
  • Значение опции хранится в атрибуте data-value (HTML-структура есть в исходном документе).

Например:

В примере выше два селекта, чтобы можно было проверить процесс открытия-закрытия.

Открыть песочницу для задачи.

В этом решении для закрытия селекта по клику вне него используется отслеживание произвольных кликов внутри документа.

Альтернатива – события focusin/focusout, т.е. считаем, что пока фокус в селекте – он открыт. С одной стороны, это более мощный способ, он позволяет перемещаться по элементам управления при помощи Tab и корректно обрабатывать уход при помощи клавиатуры.

С другой стороны, это решение не универсально: если выводится alert, то фокус «прыгает» в него, уходя с элемента, а потом возвращается обратно. При этом JavaScript зарегистрирует уход фокуса focusout и возвращение focusin, хотя по смыслу фокус с элемента никуда не уходил, просто был alert.

Побочный эффект – закрытие и (лишнее) раскрытие элемента управления при таких «ненамеренных» потерях фокуса. Поэтому был выбран onclick.

Решение:

Открыть решение в песочнице.