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="uniq14953563830361 uniq14953563830362 uniq14953563830363" aria-multiselectable="true" aria-labelledby="uniq14953563830364" type="button"><span class="button__text" id="uniq14953563830364">Мастер-класс, Круглый стол</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="uniq14953563830361" 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="uniq14953563830362" 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="uniq14953563830363" 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="uniq14953563829101 uniq14953563829102 uniq14953563829103"
aria-labelledby="uniq14953563829104" type="button"><span class="button__text" id="uniq14953563829104">Мастер-класс</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="uniq14953563829101" 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="uniq14953563829102" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563829103" 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="uniq14953563871931 uniq14953563871932 uniq14953563871933"
aria-labelledby="uniq14953563871934" type="button"><span class="button__text" id="uniq14953563871934">Мастер-класс</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="uniq14953563871931" 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="uniq14953563871932" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563871933" 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="uniq14953563835781 uniq14953563835782 uniq14953563835783"
aria-labelledby="uniq14953563835784" type="button"><span class="button__text" id="uniq14953563835784">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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="uniq14953563835781" 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="uniq14953563835782" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563835783" 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="uniq14953563838991 uniq14953563838992 uniq14953563838993" aria-labelledby="uniq14953563838994" type="button" disabled="disabled"><span class="button__text" id="uniq14953563838994">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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="uniq14953563838991" 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="uniq14953563838992" 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="uniq14953563838993" 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="uniq14953563834621 uniq14953563834622 uniq14953563834623"
aria-labelledby="uniq14953563834624" type="button"><span class="button__text" id="uniq14953563834624">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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="uniq14953563834621" 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="uniq14953563834622" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563834623" 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="uniq14953563869241 uniq14953563869242 uniq14953563869243"
aria-labelledby="uniq14953563869244" type="button"><span class="button__text" id="uniq14953563869244">Мастер-класс</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="uniq14953563869241" 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="uniq14953563869242" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563869243" 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="uniq14953563842491 uniq14953563842492 uniq14953563842493"
aria-labelledby="uniq14953563842494" type="button"><span class="button__text" id="uniq14953563842494">Мастер-класс</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="uniq14953563842491" 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="uniq14953563842492" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563842493" 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="uniq14953563869241 uniq14953563869242 uniq14953563869243"
aria-labelledby="uniq14953563869244" type="button"><span class="button__text" id="uniq14953563869244">Мастер-класс</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="uniq14953563869241" 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="uniq14953563869242" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563869243" 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="uniq14953563832091 uniq14953563832092 uniq14953563832093"
aria-labelledby="uniq14953563832094" type="button"><span class="button__text" id="uniq14953563832094">Мастер-класс</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="uniq14953563832091" 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="uniq14953563832092" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563832093" 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="uniq14953563837441 uniq14953563837442 uniq14953563837443"
aria-labelledby="uniq14953563837444" type="button"><span class="button__text" id="uniq14953563837444">Мастер-класс</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="uniq14953563837441" 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="uniq14953563837442" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563837443" 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="uniq14953563830931 uniq14953563830932 uniq14953563830933"
aria-labelledby="uniq14953563830934" type="button"><span class="button__text" id="uniq14953563830934">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="uniq14953563830931" aria-checked="true">Report</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563830932" aria-checked="false">Workshop</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563830933" 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="uniq14953563869241 uniq14953563869242 uniq14953563869243"
aria-labelledby="uniq14953563869244" type="button"><span class="button__text" id="uniq14953563869244">Мастер-класс</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="uniq14953563869241" 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="uniq14953563869242" aria-checked="true">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563869243" 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="uniq14953563830361 uniq14953563830362 uniq14953563830363" aria-multiselectable="true" aria-labelledby="uniq14953563830364" type="button"><span class="button__text" id="uniq14953563830364">Мастер-класс, Круглый стол</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="uniq14953563830361" 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="uniq14953563830362" 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="uniq14953563830363" 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="uniq14953563841301 uniq14953563841302 uniq14953563841303" aria-labelledby="uniq14953563841304" type="button"><span class="button__text" id="uniq14953563841304">Обучатор</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="uniq14953563841301" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563841302" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563841303" 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="uniq14953563835151 uniq14953563835152 uniq14953563835153" aria-multiselectable="true" aria-labelledby="uniq14953563835154"
type="button"><span class="button__text" id="uniq14953563835154">Ничего не выбрано</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="uniq14953563835151" aria-checked="false">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563835152" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563835153" 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="uniq14953563836881 uniq14953563836882"
aria-multiselectable="true" aria-labelledby="uniq14953563836883" type="button"><span class="button__text" id="uniq14953563836883">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="uniq14953563836881" 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="uniq14953563836882"
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="uniq14953563872951 uniq14953563872952 uniq14953563872953 uniq14953563872954 uniq14953563872955" aria-multiselectable="true" aria-labelledby="uniq14953563872956" type="button"><span class="button__text" id="uniq14953563872956">Доклад №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="uniq14953563872957">
<div class="menu__group-title" role="presentation" id="uniq14953563872957">Теория</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563872951" 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="uniq14953563872952" aria-checked="true">Доклад №2</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563872953" aria-checked="false">Доклад №3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953563872958">
<div class="menu__group-title" role="presentation" id="uniq14953563872958">Практика</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="option" id="uniq14953563872954" 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="uniq14953563872955" 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="uniq14953563843091 uniq14953563843092 uniq14953563843093 uniq14953563843094 uniq14953563843095" aria-multiselectable="true" aria-labelledby="uniq14953563843096" type="button"><span class="button__text" id="uniq14953563843096">Доклад №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="uniq14953563843097">
<div class="menu__group-title" role="presentation" id="uniq14953563843097">Теория</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="option" id="uniq14953563843091" 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="uniq14953563843092" aria-checked="true">Доклад №2</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563843093" aria-checked="false">Доклад №3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953563843098">
<div class="menu__group-title" role="presentation" id="uniq14953563843098">Практика</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="option" id="uniq14953563843094" 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="uniq14953563843095" 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="uniq14953563834071 uniq14953563834072 uniq14953563834073"
aria-labelledby="uniq14953563834074" id="Unique_1" type="button"><span class="button__text" id="uniq14953563834074">Доклад</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="uniq14953563834071" aria-checked="true">Доклад</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="option" id="uniq14953563834072" aria-checked="false">Мастер-класс</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="option" id="uniq14953563834073" 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'
}
}
]