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)
Позволяет выбрать произвольное количество пунктов в раскрывающемся списке.
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1","text":"Программа конференции"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select1" value="3" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem"
data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563610111 uniq14953563610112 uniq14953563610113" aria-multiselectable="true" aria-labelledby="uniq14953563610114" type="button"><span class="button__text" id="uniq14953563610114">Мастер-класс, Круглый стол</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563610111" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563610112" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563610113" aria-checked="true">Круглый стол</div>
</div>
</div>
</div>
{
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: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Список с одиночным обязательным выбором (модификатор mode в значении radio)
Позволяет создать раскрывающийся список, в котором выбран ровно один пункт.
Если пункт не выбран, то по умолчанию выбирается первое значение из списка.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select2"}}'><input class="select__control" type="hidden" name="select2" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563608801 uniq14953563608802 uniq14953563608803"
aria-labelledby="uniq14953563608804" type="button"><span class="button__text" id="uniq14953563608804">Мастер-класс</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563608801" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563608802" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563608803" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select2',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
Список с одиночным необязательным выбором (модификатор mode в значении radio-check)
Модификатор mode в значении radio-check, так же как и модификатор mode в значении radio, позволяет выбрать ровно один пункт из выпадающего списка. Принципиальное отличие в том, что в значении radio-check есть возможность оставить список без выбранных пунктов.
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select3","text":"—"}}'><input class="select__control" type="hidden" name="select3" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563627391 uniq14953563627392 uniq14953563627393"
aria-labelledby="uniq14953563627394" type="button"><span class="button__text" id="uniq14953563627394">Мастер-класс</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio-check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563627391" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563627392" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563627393" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
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: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
Модификатор width
Допустимое значение: 'available'.
Способ использования: BEMJSON.
Позволяет растягивать кнопку раскрывающегося списка на максимально допустимую ширину.
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m select_width_available i-bem" data-bem='{"select":{"name":"select4","text":"—"}}'><input class="select__control" type="hidden" name="select4" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563615731 uniq14953563615732 uniq14953563615733"
aria-labelledby="uniq14953563615734" type="button"><span class="button__text" id="uniq14953563615734">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio-check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563615731" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563615732" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563615733" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
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: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm',
width: 'available'
}
}
]
Модификатор disabled
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Модификатор может быть установлен:
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m select_disabled i-bem" data-bem='{"select":{"name":"select4","text":"—"}}'><input class="select__control" type="hidden" name="select4" value="2" disabled="disabled" autocomplete="off"><button class="button button_size_m button_theme_islands button_disabled button_checked select__button button__control i-bem" data-bem='{"button":{}}'
role="listbox" aria-owns="uniq14953563618721 uniq14953563618722 uniq14953563618723" aria-labelledby="uniq14953563618724" type="button" disabled="disabled"><span class="button__text" id="uniq14953563618724">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_disabled menu_mode_radio-check select__menu menu__control i-bem" data-bem='{"menu":{"tabIndex":0}}' aria-disabled="true">
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563618721" aria-disabled="true" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_disabled menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563618722" aria-disabled="true" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563618723" aria-disabled="true" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
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',
disabled: true
}
}
]
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select4","text":"—"}}'><input class="select__control" type="hidden" name="select4" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563614511 uniq14953563614512 uniq14953563614513"
aria-labelledby="uniq14953563614514" type="button"><span class="button__text" id="uniq14953563614514">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio-check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563614511" aria-disabled="true" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563614512" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563614513" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
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: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
Модификатор 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.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563625061 uniq14953563625062 uniq14953563625063"
aria-labelledby="uniq14953563625064" type="button"><span class="button__text" id="uniq14953563625064">Мастер-класс</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563625061" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563625062" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563625063" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
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: 'm'
}
}
]
Модификатор size
Допустимые значения: 's', 'm', 'l', 'xl'.
Способ использования: BEMJSON.
Задает размер блоку.
Необходимо использовать с модификатором theme в значении islands.
s
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_s i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_s button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563622471 uniq14953563622472 uniq14953563622473"
aria-labelledby="uniq14953563622474" type="button"><span class="button__text" id="uniq14953563622474">Мастер-класс</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_s menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563622471" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563622472" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563622473" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
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: 's'
}
}
]
m
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563625061 uniq14953563625062 uniq14953563625063"
aria-labelledby="uniq14953563625064" type="button"><span class="button__text" id="uniq14953563625064">Мастер-класс</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563625061" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563625062" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563625063" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
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: 'm'
}
}
]
l
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_l i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_l button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563612191 uniq14953563612192 uniq14953563612193"
aria-labelledby="uniq14953563612194" type="button"><span class="button__text" id="uniq14953563612194">Мастер-класс</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_l menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563612191" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563612192" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563612193" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
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: 'l'
}
}
]
xl
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_xl i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_xl button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563617721 uniq14953563617722 uniq14953563617723"
aria-labelledby="uniq14953563617724" type="button"><span class="button__text" id="uniq14953563617724">Мастер-класс</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_xl menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563617721" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563617722" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563617723" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'xl'
},
name: 'select1',
val: 2,
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'xl'
}
}
]
Специализированные поля блока
Поле name
Тип: String.
Определяет имя выпадающего списка.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="1" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563611051 uniq14953563611052 uniq14953563611053"
aria-labelledby="uniq14953563611054" type="button"><span class="button__text" id="uniq14953563611054">Report</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563611051" aria-checked="true">Report</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563611052" aria-checked="false">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563611053" aria-checked="false">Round-table conference</div>
</div>
</div>
</div>
{
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'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]
Поле val
Тип: String, Number, Array (если указан модификатор mode в значении check).
Определяет:
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563625061 uniq14953563625062 uniq14953563625063"
aria-labelledby="uniq14953563625064" type="button"><span class="button__text" id="uniq14953563625064">Мастер-класс</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563625061" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563625062" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563625063" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
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: 'm'
}
}
]
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1","text":"Программа конференции"}}'><input class="select__control" type="hidden" name="select1" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select1" value="3" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem"
data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563610111 uniq14953563610112 uniq14953563610113" aria-multiselectable="true" aria-labelledby="uniq14953563610114" type="button"><span class="button__text" id="uniq14953563610114">Мастер-класс, Круглый стол</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563610111" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563610112" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563610113" aria-checked="true">Круглый стол</div>
</div>
</div>
</div>
{
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: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Поле text
Тип: String.
Определяет значение, которое отображается в кнопке раскрывающегося списка, в случае, если ни один из пунктов выбран. Используется только для кнопки с модификатором type в значении check или в значении radio-check.
Open in a new window<div class="select select_mode_radio-check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select3","text":"Обучатор"}}'><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563621141 uniq14953563621142 uniq14953563621143" aria-labelledby="uniq14953563621144" type="button"><span class="button__text" id="uniq14953563621144">Обучатор</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio-check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563621141" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563621142" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563621143" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
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: 'radio-check',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1","text":"Ничего не выбрано"}}'><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563615121 uniq14953563615122 uniq14953563615123" aria-multiselectable="true" aria-labelledby="uniq14953563615124"
type="button"><span class="button__text" id="uniq14953563615124">Ничего не выбрано</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}'
aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563615121" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563615122" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563615123" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
},
name: 'select1',
text: 'Ничего не выбрано',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Поле options
Тип: Array.
Определяет массив объектов (пунктов списка) либо групп с опциональным названием.
Задает набор значений для каждого пункта.
| Поле |
Тип |
Описание |
val |
String, Number |
Значение, которое будет отправлено на сервер при выборе пункта. Обязательное поле. |
text |
String |
Название пункта в списке. |
checkedText |
String |
Текст, отображаемый вместо названия пункта в кнопке раскрывающегося списка. Задается только для списков с возможностью множественного выбора. |
disabled |
Boolean |
Неактивное состояние отдельного пункта. |
icon |
BEMJSON |
Иконка. Формируется блоком icon. |
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select5","text":"Подписаться на новости"}}'><input class="select__control" type="hidden" name="select5" value="2" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563617141 uniq14953563617142"
aria-multiselectable="true" aria-labelledby="uniq14953563617143" type="button"><span class="button__text" id="uniq14953563617143">VKontakte</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"checkedText":"tw","text":"Twitter","val":1}}' role="option" id="uniq14953563617141" aria-checked="false"><span class="icon icon_social_twitter"></span>Twitter</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"checkedText":"vk","text":"VKontakte","val":2}}' role="option" id="uniq14953563617142"
aria-checked="true"><span class="icon icon_social_vk"></span>VKontakte</div>
</div>
</div>
</div>
{
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'
}
}
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Пункты раскрывающегося списка могут быть организованы в группы:
| Поле |
Тип |
Описание |
title |
String |
Название группы пунктов. |
group |
Array |
Массив пунктов. |
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select5","text":"Программа конференции"}}'><input class="select__control" type="hidden" name="select5" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select5" value="5" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem"
data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563628541 uniq14953563628542 uniq14953563628543 uniq14953563628544 uniq14953563628545" aria-multiselectable="true" aria-labelledby="uniq14953563628546" type="button"><span class="button__text" id="uniq14953563628546">Доклад №2, Мастер-класс №2</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__group" role="group" aria-labelledby="uniq14953563628547">
<div class="menu__group-title" role="presentation" id="uniq14953563628547">Теория</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563628541" aria-checked="false">Доклад №1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563628542" aria-checked="true">Доклад №2</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563628543" aria-checked="false">Доклад №3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953563628548">
<div class="menu__group-title" role="presentation" id="uniq14953563628548">Практика</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="option" id="uniq14953563628544" aria-checked="false">Мастер-класс №1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":5}}' role="option" id="uniq14953563628545" aria-checked="true">Мастер-класс №2</div>
</div>
</div>
</div>
</div>
{
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'
}
]
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Поле optionsMaxHeight
Тип: Number.
Определяет максимальную высоту раскрывающегося списка. Если все пункты списка не вмещаются, появляется полоса прокрутки.
Если значение не указано, высота раскрывающегося списка по умолчанию будет вычисляться в зависимости от количества пунктов.
Open in a new window<div class="select select_mode_check select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select5","optionsMaxHeight":100,"text":"Программа конференции"}}'><input class="select__control" type="hidden" name="select5" value="2" autocomplete="off"><input class="select__control" type="hidden" name="select5" value="5" autocomplete="off"><button class="button button_size_m button_theme_islands button_checked select__button button__control i-bem"
data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563623141 uniq14953563623142 uniq14953563623143 uniq14953563623144 uniq14953563623145" aria-multiselectable="true" aria-labelledby="uniq14953563623146" type="button"><span class="button__text" id="uniq14953563623146">Доклад №2, Мастер-класс №2</span><span class="icon select__tick"></span></button>
<div
class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem" data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_check select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__group" role="group" aria-labelledby="uniq14953563623147">
<div class="menu__group-title" role="presentation" id="uniq14953563623147">Теория</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563623141" aria-checked="false">Доклад №1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563623142" aria-checked="true">Доклад №2</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563623143" aria-checked="false">Доклад №3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953563623148">
<div class="menu__group-title" role="presentation" id="uniq14953563623148">Практика</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="option" id="uniq14953563623144" aria-checked="false">Мастер-класс №1</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":5}}' role="option" id="uniq14953563623145" aria-checked="true">Мастер-класс №2</div>
</div>
</div>
</div>
</div>
{
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'
}
]
}
]
}
[
{
block: 'select',
mods: {
mode: 'check',
theme: 'islands',
size: 'm'
}
}
]
Поле id
Тип: String.
Определяет уникальный идентификатор раскрывающегося списка.
Open in a new window<div class="select select_mode_radio select_theme_islands select_size_m i-bem" data-bem='{"select":{"name":"select1"}}'><input class="select__control" type="hidden" name="select1" value="1" autocomplete="off"><button class="button button_size_m button_theme_islands select__button button__control i-bem" data-bem='{"button":{}}' role="listbox" aria-owns="uniq14953563613941 uniq14953563613942 uniq14953563613943"
aria-labelledby="uniq14953563613944" id="Unique_1" type="button"><span class="button__text" id="uniq14953563613944">Доклад</span><span class="icon select__tick"></span></button>
<div class="popup popup_target_anchor popup_theme_islands popup_autoclosable i-bem"
data-bem='{"popup":{"directions":["bottom-left","bottom-right","top-left","top-right"]}}' aria-hidden="true">
<div class="menu menu_size_m menu_theme_islands menu_mode_radio select__menu menu__control i-bem" data-bem='{"menu":{}}'>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563613941" aria-checked="true">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563613942" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563613943" aria-checked="false">Круглый стол</div>
</div>
</div>
</div>
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
},
name: 'select1',
id: 'Unique_1',
options: [
{
val: 1,
text: 'Доклад'
},
{
val: 2,
text: 'Мастер-класс'
},
{
val: 3,
text: 'Круглый стол'
}
]
}
[
{
block: 'select',
mods: {
mode: 'radio',
theme: 'islands',
size: 'm'
}
}
]