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 button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610498134">Мастер-класс, Круглый стол</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemcheckbox" id="uniq14953610498131" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953610498132" aria-checked="true">Мастер-класс</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemcheckbox" id="uniq14953610498133" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610496814">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610496811" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610496812" aria-checked="true">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610496813" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610514974">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610514971" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610514972" aria-checked="true">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610514973" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610504244">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610504241" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610504242" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610504243" 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 button__control i-bem" data-bem='{"button":{}}' role="button"
type="button" disabled="disabled"><span class="button__text" id="uniq14953610507254">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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 menu__control i-bem" data-bem='{"menu":{"tabIndex":0}}' role="menu" aria-disabled="true">
<div class="menu-item menu-item_disabled menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610507251" 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="menuitemradio" id="uniq14953610507252" 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="menuitemradio" id="uniq14953610507253" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610503124">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_disabled menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610503121" 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="menuitemradio" id="uniq14953610503122" aria-checked="true">Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610503123" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610512814">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610512811" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610512812" aria-checked="true">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610512813" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610510394">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610510391" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610510392" aria-checked="true">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610510393" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610512814">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610512811" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610512812" aria-checked="true">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610512813" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610500684">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610500681" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610500682" aria-checked="true">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610500683" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610505894">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610505891" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610505892" aria-checked="true">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610505893" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610498694">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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610498691" aria-checked="true">Report</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610498692" aria-checked="false">Workshop</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610498693" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610512814">Мастер-класс</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610512811" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610512812" aria-checked="true">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610512813" 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 button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610498134">Мастер-класс, Круглый стол</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemcheckbox" id="uniq14953610498131" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953610498132" aria-checked="true">Мастер-класс</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemcheckbox" id="uniq14953610498133" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610509384">Обучатор</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610509381" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610509382" aria-checked="false">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610509383" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610503704">Ничего не выбрано</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemcheckbox" id="uniq14953610503701" aria-checked="false">Доклад</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953610503702" aria-checked="false">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemcheckbox" id="uniq14953610503703" 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 button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610505373">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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemcheckbox" id="uniq14953610505371" 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":{"val":2}}' role="menuitemcheckbox" id="uniq14953610505372" 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 button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610516036">Доклад №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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__group" role="group" aria-labelledby="uniq14953610516037">
<div class="menu__group-title" role="presentation" id="uniq14953610516037">Теория</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemcheckbox" id="uniq14953610516031" 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="menuitemcheckbox" id="uniq14953610516032" aria-checked="true">Доклад №2</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemcheckbox" id="uniq14953610516033" aria-checked="false">Доклад №3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953610516038">
<div class="menu__group-title" role="presentation" id="uniq14953610516038">Практика</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":4}}' role="menuitemcheckbox" id="uniq14953610516034" 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="menuitemcheckbox" id="uniq14953610516035" 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 button__control i-bem"
data-bem='{"button":{}}' role="button" type="button"><span class="button__text" id="uniq14953610510976">Доклад №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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__group" role="group" aria-labelledby="uniq14953610510977">
<div class="menu__group-title" role="presentation" id="uniq14953610510977">Теория</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemcheckbox" id="uniq14953610510971" 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="menuitemcheckbox" id="uniq14953610510972" aria-checked="true">Доклад №2</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemcheckbox" id="uniq14953610510973" aria-checked="false">Доклад №3</div>
</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953610510978">
<div class="menu__group-title" role="presentation" id="uniq14953610510978">Практика</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":4}}' role="menuitemcheckbox" id="uniq14953610510974" 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="menuitemcheckbox" id="uniq14953610510975" 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 button__control i-bem" data-bem='{"button":{}}' role="button" id="Unique_1" type="button"><span class="button__text" id="uniq14953610502594">Доклад</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 menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610502591" aria-checked="true">Доклад</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610502592" aria-checked="false">Мастер-класс</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610502593" 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'
}
}
]