Раскрывающийся список Select

Раскрывающийся список дозволяет избрать значение из заблаговременно известного набора вариантов.

Когда употреблять

Используйте раскрывающийся список для выбора 1-го значения из 5–25 вариантов:

при заполнении форм, к примеру выбор месяца;
переключение состояний, к примеру фильтры;
выбора предустановленных опций, к примеру частота извещений, часовой пояс.

Если значений в перечне до 5, лучше употреблять группу радиокнопок либо переключатель. Если значений больше 25 — используйте комбобокс.

Описание работы

При нажатии на клавишу раскрывающегося перечня возникает список вариантов для выбора. Опосля выбора 1-го из вариантов, его заглавие подставляется в клавишу, список прячется, размеры клавиши при всем этом остаются прежними.

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

Если раскрывающийся список употребляется для опции характеристик, в нем сходу выбрано значение, соответственное текущему состоянию системы. Это дает юзеру возможность возвратить настройку в первоначальное состояние.

Если нереально избрать значение за юзера, то поле остается пустым либо с плейсхолдером-призывом к наполнению — к примеру, «Изберите». В перечне вариантов плейсхолдер не показывается

Чтоб юзер мог отменить выбор, добавьте в список соответственный пункт. К примеру, «Все», «Хоть какой», «Непринципиально». Отделите таковой пункт линией.

Прокрутка в раскрывающемся перечне обязана перекрыть прокрутку всей странички, пока указатель мышки находится снутри блока. Если этого не создать, страничка прокрутится при достижении верхней либо нижней границы.

Заглавие

Заглавие клавиши и перечня вариантов пишут с большей буковкы и определяют так, чтоб:

было понятно, что можно избрать лишь 1 вариант;
наименования не содержали повторяющуюся часть;
заглавие клавиши не дублировалось в пт перечня.

Интересно почитать: Olap кубы в excel

В заглавии недозволено употреблять слова «Изберите», «Укажите» и т. д.

Размер и размещение

Ширина клавиши обязана быть таковой, чтоб большая часть значений из перечня помещалась на сто процентов:

Если выбранное значение не помещается, возникает многоточие:

Ширина перечня обязана быть не меньше ширины клавиши. Прекрасно, когда список обширнее клавиши на 30−40 px.

Наименования пт демонстрируют на сто процентов, по мере необходимости переносятся на несколько строк.

Элементы перечня размещены в один столбец в согласовании с логикой, понятной юзеру. К примеру: отсортированы по алфавиту, по номеру. В огромных перечнях полезно продублировать пользующиеся популярностью варианты сначала перечня, отделив их линией.

Список раскрывается вниз. Малая высота перечня со скроллингом 200 px. При наличии места список стремится показать максимум вариантов и расширяется до высоты 450 px. Исключение — если раскрывающийся список находится на панели, закрепленной у нижней границы окна. В таком случае он раскрывается ввысь.

Список раскрывается под залипающей панелью, т. к. находится на том же уровне, что и родительский элемент. Чтоб у юзера не появилось затруднений при работе с таковым контролом, оставляйте понизу странички пространство, довольно для открытия перечня, либо не ставьте его крайним в форме.

Фокус и работа с клавиатурой

Раскрывающийся список получает фокус лишь при переходе табом —возникает голубая рамка. При клике фокусная рамка не возникает.

В свернутом состоянии клавиши Enter и ↓ открывают список и перемещают голубую подсветку на 1-ый пункт в перечне.

В развернутом состоянии клавиши ↑ и ↓ перемещают голубую подсветку, а кнопка Enter выбирает подсвеченную строчку. Опосля этого фокус перебегает на последующий контрол.

Валидация

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

Интересно почитать: Точечная диаграмма в excel

Дизайн

Снаружи раскрывающийся список смотрится как клавиша. Текст выравнивается по левому краю. В правой части стрелка — знак из шрифта Kontur Iconic.

Опосля открытия перечня, клавиша остается нажатой: заглавие клавиши и стрелка смещаются вниз на 1 px, как у обыкновенной клавиши.

Выпадающий блок раскрытого перечня имеет полупрозрачную рамку. Он размещен вплотную к кнопочке так, что тень перечня накладывается на клавишу.

В момент нажатия:

В перечне избранный вариант выделяется сероватым фоном, пункт под курсором инвертируется и подсвечивается голубым.

Заблокированный пункт выделяется сероватым цветом, при наведении курсор преобразуется в стрелку.

Пункты перечня можно дополнять пояснениями — сероватым текстом, который при наведении преобразуется в белоснежный с 60 % прозрачности.

Список можно поделить на группы с заголовком либо без. При наведении заголовок не подсвечивается, курсор преобразуется в стрелку.

Адаптивность

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

Высота перечня зависит от количества частей. Оставшееся пустое пространство затеняет страничку. Тап в затенённую область либо крестик закрывает список без конфигураций.

При большенном количестве опций для выбора, список сохраняет отступ в 40px от верхнего края экрана, скроллится снутри, при всем этом заголовок остаётся статичным и отбрасывает тень, при скролле опций под ним.

Если включен поиск, список раскрывается на всю высоту экрана, без отступа сверху. Фокус автоматом ставится в поле поиска и раскрывается нативная клавиатура. Ввод фильтрует список опций, скрывая неподходящие.

При фильтрации список выравнивается по верхнему краю. Само меню выбора не миниатюризируется, сохраняя высоту во весь экран.

Если начать скроллить список — поле поиска теряет фокус и прячется клавиатура.

Интересно почитать: Замена в эксель

Скрипт Гугл Sheets для разрешения множественного выбора в ячейках с проверкой данных

Как настроить работу множественного выбора в ячейка Гугл Docs

Добавляем скрипт

В собственном Гугл Листе настройте проверку данных для ячейки (либо ячеек), используя данные из спектра. При проверке ячейки не выбирайте «Отклонить ввод».

Перейдите в Инструменты > Редактор скриптов …

В редакторе сценариев изберите «Файл»> «Сделать»> «Файл сценария».

Назовите файл multi-select .gs и вставьте содержимое ниже. дальше нажмите Файл> Сохранить.

Добавляем HTML

Назовите файл dialog .html и вставьте код который указан ниже. Дальше нажмите Файл> Сохранить.

Используем решение в собственных таблицах

Возвратившись в свою электрическую таблицу, у вас обязано показаться новое меню «Scripts». Обновите страничку, если это нужно.

Изберите ячейку, которую вы желаете заполнить несколькими элементами из спектра проверки (к примеру из выпадающего перечня).

Перейдите в Scripts > Multi-select for this cell… для данной нам ячейки … У Вас обязана покажется боковая панель, демонстрируя контрольный список допустимых значений.

Отметьте нужные элементы и нажмите клавишу «Select», чтоб заполнить ячейку выделенными элементами, разбитыми запятой.

Вы сможете бросить боковую панель скрипта открытой. Когда вы выбираете всякую ячейку, которая имеет проверку, нажмите «Обновить проверку» на боковой панели скрипта, чтоб вызвать контрольный список данной нам ячейки.