select

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

Обзор блока

Модификаторы блока

Модификатор	Допустимые значения	Способы использования	Описание
mode	`'check'`, `'radio'`, `'radio-check'`	`BEMJSON`	Режим выбора пунктов раскрывающегося списка.
width	`'available'`	`BEMJSON`	Ширина кнопки раскрывающегося списка.
disabled	`true`	`BEMJSON`, `JS`	Неактивное состояние.
focused	`true`	`BEMJSON`, `JS`	Фокус на блоке.
theme	`'islands'`	`BEMJSON`	Стилевое оформление.
size	`'s'`, `'m'`, `'l'`, `'xl'`	`BEMJSON`	Размер блока.

Специализированные поля блока

Поле	Тип	Описание
name	`String`	Имя раскрывающегося списка.
val	`String`, `Number`, `Array`	Выбранное значение из списка. Если блоку установлен модификатор mode в значении check, выбранные значения всегда оформляются в виде массива.
text	`String`	Значение, которое отображается в кнопке раскрывающегося списка, в случае, если ни один из пунктов выбран. Используется только для кнопки с модификатором type в значении check или в значении radio-check.
options	`Array`	Массив пунктов списка.
optionsMaxHeight	`Number`	Максимальная высота выпадающего списка.
id	`String`	Уникальный идентификатор раскрывающегося списка.
tabIndex	`Number`	Последовательность перехода между контролами при нажатии на `Tab`.

Описание блока

Блок визуально представлен кнопкой и выпадающим списком.

Реализация блока поддерживает клавиатурное управление, если блок select находится в фокусе (установлен модификатор focused в значении true):

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

Модификаторы блока

Модификатор `mode`

Допустимые значения: 'check, 'radio', 'radio-check'.

Способ использования: BEMJSON.

Обязательный модификатор.

Список с множественным выбором (модификатор `mode` в значении `check`)

Позволяет выбрать произвольное количество пунктов в раскрывающемся списке.

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select1',
    val : [2, 3],
    text : 'Программа конференции',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Список с одиночным обязательным выбором (модификатор `mode` в значении `radio`)

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

Если пункт не выбран, то по умолчанию выбирается первое значение из списка.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select2',
    val : 2,
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Список с одиночным необязательным выбором (модификатор `mode` в значении `radio-check`)

Модификатор mode в значении radio-check, так же как и модификатор mode в значении radio, позволяет выбрать ровно один пункт из выпадающего списка. Принципиальное отличие в том, что в значении radio-check есть возможность оставить список без выбранных пунктов.

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm' },
    name : 'select3',
    val : 2,
    text : '—',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Модификатор `width`

Допустимое значение: 'available'.

Способ использования: BEMJSON.

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

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm', width : 'available' },
    name : 'select4',
    val : 2,
    text : '—',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Модификатор `disabled`

Допустимое значение: true.

Способы использования: BEMJSON, JS.

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

Модификатор может быть установлен:

всему блоку

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm', disabled : true },
    name : 'select4',
    val : 2,
    text : '—',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем' },
        { val : 3, text : 'Круглый стол' }
    ]
}

отдельному пункту списка

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm' },
    name : 'select4',
    val : 2,
    text : '—',
    options : [
        { val : 1, text : 'Доклад', disabled : true },
        { val : 2, text : 'Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Модификатор `focused`

Допустимое значение: true.

Способы использования: BEMJSON, JS.

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

Отвечает за наличие фокуса на блоке.

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm', focused : true },
    name : 'select4',
    val : 2,
    text : '—',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.

Модификатор `theme`

Допустимое значение: 'islands'.

Способ использования: BEMJSON.

Модификатор отвечает за стилевое оформление блока.

Необходимо использовать с модификатором size.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Модификатор `size`

Допустимые значения: 's', 'm', 'l', 'xl'.

Способ использования: BEMJSON.

Задает размер блоку.

Необходимо использовать с модификатором theme в значении islands.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 's' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'l' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'xl' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Специализированные поля блока

Поле `name`

Тип: String.

Определяет имя выпадающего списка.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select1',
    options : [
        { val : 1, text : 'Report' },
        { val : 2, text : 'Workshop' },
        { val : 3, text : 'Round-table conference' }
    ]
}

Поле `val`

Тип: String, Number, Array (если указан модификатор mode в значении check).

Определяет:

выбранный пункт списка.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select1',
    val : 2,
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

список выбранных пунктов списка, если блоку установлен модификатор mode в значении check, и используется тип поля Array.

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select1',
    val : [2, 3],
    text : 'Программа конференции',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Поле `text`

Тип: String.

Определяет значение, которое отображается в кнопке раскрывающегося списка, в случае, если ни один из пунктов выбран. Используется только для кнопки с модификатором type в значении check или в значении radio-check.

{
    block : 'select',
    mods : { mode : 'radio-check', theme : 'islands', size : 'm' },
    name : 'select3',
    text : 'Обучатор',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select1',
    text : 'Ничего не выбрано',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Поле `options`

Тип: Array.

Определяет массив объектов (пунктов списка) либо групп с опциональным названием.

Задает набор значений для каждого пункта.

Поле	Тип	Описание
`val`	`String`, `Number`	Значение, которое будет отправлено на сервер при выборе пункта. Обязательное поле.
`text`	`String`	Название пункта в списке.
`checkedText`	`String`	Текст, отображаемый вместо названия пункта в кнопке раскрывающегося списка. Задается только для списков с возможностью множественного выбора.
`disabled`	`Boolean`	Неактивное состояние отдельного пункта.
`icon`	`BEMJSON`	Иконка. Формируется блоком icon.

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select5',
    val : [2],
    text : 'Подписаться на новости',
    options : [
        {
            val : 1,
            text : 'Twitter',
            checkedText : 'tw',
            icon : { block : 'icon', mods : { social : 'twitter' } }
        },
        {
            val : 2,
            text : 'VKontakte',
            checkedText : 'vk',
            icon : { block : 'icon', mods : { social : 'vk' } }
        }
    ]
}

Пункты раскрывающегося списка могут быть организованы в группы:

Поле	Тип	Описание
`title`	`String`	Название группы пунктов.
`group`	`Array`	Массив пунктов.

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select5',
    val : [2, 5],
    text : 'Программа конференции',
    options : [
        {
            title : 'Теория',
            group : [
                { val : 1, text : 'Доклад №1' },
                { val : 2, text : 'Доклад №2' },
                { val : 3, text : 'Доклад №3' },
            ]
        },
        {
            title : 'Практика',
            group : [
                { val : 4, text : 'Мастер-класс №1' },
                { val : 5, text : 'Мастер-класс №2' }
            ]
        }
    ]
}

Поле `optionsMaxHeight`

Тип: Number.

Определяет максимальную высоту раскрывающегося списка. Если все пункты списка не вмещаются, появляется полоса прокрутки.

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

{
    block : 'select',
    mods : { mode : 'check', theme : 'islands', size : 'm' },
    name : 'select5',
    val : [2, 5],
    optionsMaxHeight : 100,
    text : 'Программа конференции',
    options : [
        {
            title : 'Теория',
            group : [
                { val : 1, text : 'Доклад №1' },
                { val : 2, text : 'Доклад №2' },
                { val : 3, text : 'Доклад №3' },
            ]
        },
        {
            title : 'Практика',
            group : [
                { val : 4, text : 'Мастер-класс №1' },
                { val : 5, text : 'Мастер-класс №2' }
            ]
        }
    ]
}

Поле `id`

Тип: String.

Определяет уникальный идентификатор раскрывающегося списка.

{
    block : 'select',
    mods : { mode : 'radio', theme : 'islands', size : 'm' },
    name : 'select1',
    id : 'Unique_1',
    options : [
        { val : 1, text : 'Доклад' },
        { val : 2, text : 'Мастер-класс' },
        { val : 3, text : 'Круглый стол' }
    ]
}

Navigation Menu

Uh oh!

select

Обзор блока

Модификаторы блока

Специализированные поля блока

Описание блока

Модификаторы блока

Модификатор `mode`

Список с множественным выбором (модификатор `mode` в значении `check`)

Список с одиночным обязательным выбором (модификатор `mode` в значении `radio`)

Список с одиночным необязательным выбором (модификатор `mode` в значении `radio-check`)

Модификатор `width`

Модификатор `disabled`

Модификатор `focused`

Модификатор `theme`

Модификатор `size`

Специализированные поля блока

Поле `name`

Поле `val`

Поле `text`

Поле `options`

Поле `optionsMaxHeight`

Поле `id`

Uh oh!

FilesExpand file tree

select.ru.md

Latest commit

History

select.ru.md

File metadata and controls

select

Обзор блока

Модификаторы блока

Специализированные поля блока

Описание блока

Модификаторы блока

Модификатор mode

Список с множественным выбором (модификатор mode в значении check)

Список с одиночным обязательным выбором (модификатор mode в значении radio)

Список с одиночным необязательным выбором (модификатор mode в значении radio-check)

Модификатор width

Модификатор disabled

Модификатор focused

Модификатор theme

Модификатор size

Специализированные поля блока

Поле name

Поле val

Поле text

Поле options

Поле optionsMaxHeight

Поле id

Модификатор `mode`

Список с множественным выбором (модификатор `mode` в значении `check`)

Список с одиночным обязательным выбором (модификатор `mode` в значении `radio`)

Список с одиночным необязательным выбором (модификатор `mode` в значении `radio-check`)

Модификатор `width`

Модификатор `disabled`

Модификатор `focused`

Модификатор `theme`

Модификатор `size`

Поле `name`

Поле `val`

Поле `text`

Поле `options`

Поле `optionsMaxHeight`

Поле `id`