EN RU
Forum

Methodology

Technology

Toolbox

Libraries

Tutorials

DocumentationJSDocSource

select

Use this block for creating a dropdown menu with the possibility of single or multiple choice. The select block is implemented by a button and a dropdown menu list.

Overview

Modifiers of the block

Modifier Acceptable values Use cases Description
mode 'check', 'radio', 'radio-check' BEMJSON The selection mode for the dropdown menu list.
width 'available' BEMJSON The button width.
disabled true BEMJSON, JS The disabled state.
focused true BEMJSON, JS The block is in focus.
theme 'islands' BEMJSON A custom design.
size 's', 'm', 'l', 'xl' BEMJSON The size of the dropdown menu list. Use sizes only with the theme modifier set to islands.

Custom fields of the block

Field Type Description
name String The block unique name.
val String, Number, Array The selected value from the dropdown menu list. If the mode modifier with the check value is applied to the block, the selected values must be declared as an array.
text String Button lable if any menu item is not selected. Use for the button with the type modifier set to check or to radio-check.
options Array The array of the menu items.
optionsMaxHeight Number The maximum height of the dropdown menu.
id String The unique identifier of the block.

Block description

The select block is implemented by a button and a dropdown menu list.

The block in the focused state supports key-pad control:

  • If the dropdown menu list is hidden, type the menu item name on your keyboard to select the menu item. The name of the menu item appears in the select button.
  • If the dropdown menu list is shown, type the menu item name on your keyboard to set the focused state to this menu item. Use Space bar or Enter buttons to select the menu item.
  • To show the dropdown menu list, use Space bar, Enter, Up or Down buttons.

Modifiers of the block

mode modifier

Acceptable values: 'check, 'radio', 'radio-check'.

Use case: BEMJSON.

The mandatory modifier.

Multiple-choice list (mode modifier with check value)

Use to create the dropdown menu with the possibility to select any number of menu items.

Open in a new window

Mandatory single-choice list (mode modifier with radio value)

Use to create the dropdown menu that has one mandatory selected item.

If any item is not specified in BEMJSON as selected, the first menu item is selected by default.

Open in a new window

Optional single-choice list (mode modifier with radio-check value)

Use to create the menu with one mandatory selected item like in the mandatory single-choice list. The fundamental difference between these two menu types is that the menu block with the mode modifier set to radio-check has an opportunity to leave the menu without the selected items.

Open in a new window

width modifier

Acceptable value: 'available'.

Use case: BEMJSON.

Use to set the maximum available width of the button.

Open in a new window

disabled modifier

Acceptable value: true.

Use cases: BEMJSON, JS.

The modifier makes the block inactive. The disabled block is visible but not available for user actions.

The modifier can be applied to:

  • The whole block
Open in a new window
  • The separate menu item
Open in a new window

focused modifier

Acceptable value: true.

Use cases: BEMJSON, JS.

The modifier puts the focus on the block.

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

theme modifier

Acceptable value: 'islands'.

Use case: BEMJSON.

The modifier gives the block a custom design.

The islands theme requires the size modifier.

Open in a new window

size modifier

Acceptable values for the islands theme: 's', 'm', 'l', 'xl'.

Use case: BEMJSON.

Use the size modifier only for blocks with the islands theme.

Sets the size value for all types of dropdown menus.

s

Open in a new window

m

Open in a new window

l

Open in a new window

xl

Open in a new window

Custom fields of the block

name field

Type: String.

Specifies the unique name of the block.

Open in a new window

val field

Type: String, Number, Array.

Specifies:

  • The selected value from the dropdown menu. In this case the field type is String or Number.
Open in a new window
  • The set of selected values from the dropdown menu. This case is possible if the block has the mode modifier set to check. The field type is an Array.
Open in a new window

text field

Type: String.

Specifies the button lable if any menu item is not selected.

Use for the button when the type modifier is set to check or to radio-check value.

Open in a new window
Open in a new window

options field

Type: Array.

Specifies an array of the menu items or groups with an optional name.

Each menu item has its own set of values.

Field Type description
val String, Number The value to send to the server if the menu item is selected. The mandatory field.
text String Menu item lable.
checkedText String The text on the button that is shown instead of the selected menu item lable. Use only for a multiple-choice dropdown menu.
disabled Boolean The disabled state of the single menu item.
icon BEMJSON The icon created by the icon block. Use icons only for menu items with the type modifier set to button.
Open in a new window

Dropdown menu items could be grouped:

Field Type description
title String The name of the menu items group.
group Array The array of the menu items.
Open in a new window

optionsMaxHeight field

Type: Number.

Specifies the maximum height of the dropdown menu.

A vertical scrollbar appears automatically if all menu items cannot fit a specified popup height.

If a value of the optionsMaxHeight field is not specified, the popup height depends on the total height of all menu items.

Open in a new window

id field

Type: String.

Specifies the block unique ID.

Open in a new window
select
Instance methods:
getVal
setVal
getName

Block select

Instance methods:

getVal():Any
description
Get value
setVal(val):select
description
Set value
parameters
val
*
getName():String
description
Get name