logo

/Select Box|v1.0.0

Class

new SelectBox(container, options)selectBox.jsline 146

PARAMETERS
NameTypeDescription

container

HTMLElementstring

container element or selector

options

object

PROPERTIES
NameTypeDescription

data

array.<itemDataitemGroupData>

array of itemData and itemGroupData

placeholder

[ string ] = ''

placeholder for an input

disabled

[ boolean ] = false

whether an Item should be disabled or not

autofocus

[ boolean ] = false

whether a selectbox should get focus when the select box appends to the container

autoclose

[ boolean ] = true

whether a selectbox should close after selection

showIcon

[ boolean ] = true

whether an arrow icon in the input should be shown

theme

[ object ]

themeConfig for custom style

usageStatistics

[ boolean ] = true

whether send hostname to google analytics. If you don't want to send the hostname, please set to false.

EXAMPLES
import SelectBox from '@toast-ui/select-box';
// or const SelectBox = require('@toast-ui/select-box');
// or const SelectBox = tui.SelectBox;

const selectBox = new SelectBox('#select-box', {
  placeholder: 'Please select an option.',
  data: [
    {
      label: 'Fruits',
      data: [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' } ]
    },
    { label: 'The quick brown fox jumps over the lazy dog.', value: 'none' },
    {
      label: 'Colors',
      data: [
        { label: 'Red', value: 'red' },
        { label: 'Yellow', value: 'yellow' },
        { label: 'Green', value: 'green', disabled: true },
        { label: 'Blue', value: 'blue', disabled: true },
        { label: 'Purple', value: 'purple' }
      ]
    }
  ],
  autofocus: true,
  showIcon: false,
  theme: {
    'common.border': '1px solid black',
    'common.color': 'black',
    'item.highlighted.background': 'yellow'
  }
});

Instance Methods

close()selectBox.jsline 524

Close a dropdown list.

EXAMPLES
selectBox.close();

deselect()selectBox.jsline 625

Deselect an item.
If selectBox has a placeholder, the input's text is a placeholder.
If no placeholder, ths input is empty.

EXAMPLES
selectBox.deselect();

destroy()selectBox.jsline 700

Destory a select box.

EXAMPLES
selectBox.destroy();

disable(value)selectBox.jsline 422

Disable a select box, item group or item.
If it takes no arguments, a select box is disabled.
If it takes string, an item with the same value as the argument is disabled.
If it takes number, an item with the same index as the argument is disabled.
If it takes Item or ItemGroup, an argument itself is disabled.

PARAMETERS
NameTypeDescription

value

stringnumberItemItemGroup

if string, find an Item by its value. if number, find an Item by its index.

EXAMPLES
selectBox.disable(); // select box is disabled.
selectBox.disable(1); // second item is disabled.
selectBox.disable('value') // item which of value is 'value' is disabled.
selectBox.disable(selectBox.getSelectedItem()); // selected item is disabled.

enable(value)selectBox.jsline 465

Enable a select box, item group or item.
If it takes no arguments, a select box is enabled.
If it takes string, an item with the same value as the argument is enabled.
If it takes number, an item with the same index as the argument is enabled.
If it takes Item or ItemGroup, an argument itself is enabled.

PARAMETERS
NameTypeDescription

value

stringnumberItemItemGroup

if string, find an Item by its value. if number, find an Item by its index.

EXAMPLES
selectBox.enable(); // select box is enabled.
selectBox.enable(1); // second item is enabled.
selectBox.enable('value') // item which of value is 'value' is enabled.
selectBox.enable(selectBox.getSelectedItem()); // selected item is enabled.

getItem(value)selectBox.jsline 664

Get an item by its index or value.

PARAMETERS
NameTypeDescription

value

numberstring

if string, the Item's value. if number, the Item's index.

RETURNS:
{

Item

}
EXAMPLES
selectBox.getItem(0); // first item
selectBox.getItem('value') // item which of value is 'value'

getItemGroup(index)selectBox.jsline 691

Get an item group by its index.

PARAMETERS
NameTypeDescription

index

number

groupIndex of the ItemGroup

RETURNS:
{

ItemGroup

}
EXAMPLES
selectBox.getItemGroup(0); // first item group

getItemGroups(callback, number)selectBox.jsline 680

Get all item groups that pass the test implemented by the provided function.
If filter function is not passed, it returns all item groups.

PARAMETERS
NameTypeDescription

callback

function

callback function to filter item groups

number

number

the number of items to find. If it is not passed, iterate all item groups.

RETURNS:
{

array.<ItemGroup>

}
EXAMPLES
selectBox.getItemGroups(); // all item groups
selectBox.getItemGroups(itemGroup => {
 return !itemGroup.isDisabled();
}); // all enabled item groups

getItems(callback, number)selectBox.jsline 652

Get all items that pass the test implemented by the provided function.
If filter function is not passed, it returns all items.

PARAMETERS
NameTypeDescription

callback

function

callback function to filter items

number

number

the number of items to find. If it is not passed, iterate all items.

RETURNS:
{

array.<Item>

}
EXAMPLES
selectBox.getItems(); // all items
selectBox.getItems(item => {
 return !item.isDisabled();
}); // all enabled items

getSelectedItem()selectBox.jsline 636

Return the selected item.

RETURNS:
{

Item

}

open()selectBox.jsline 500

Open a dropdown list.

EXAMPLES
selectBox.open();

select(value)selectBox.jsline 565

Select an item.
If it takes string, an item with the same value as the argument is selected.
If it takes number, an item with the same index as the argument is selected.
If it takes Item, an argument itself is selected.

PARAMETERS
NameTypeDescription

value

stringnumberItem

if string, find an Item by its value. if number, find an Item by its index.

RETURNS:
{

Item

} - selected Item.
EXAMPLES
selectBox.select(1); // second item is selected.
selectBox.select('value') // item which of value is 'value' is selected.

toggle()selectBox.jsline 546

Toggle a dropdown list.

EXAMPLES
selectBox.toggle();

Events

changeselectBox.jsline 602

Occurs when a selected item is changed.

PROPERTIES
NameTypeDescription

type

string

event name ('change')

prev

Item

previous selected item

curr

Item

current selected item

EXAMPLES
selectBox.on('change', ev => {
  console.log(`selected item is changed from ${ev.prev.getLabel()} to ${ev.curr.getLabel()}.`);
});

closeselectBox.jsline 538

Occurs when a select box closes.

PROPERTIES
NameTypeDescription

type

string

event name ('close')

EXAMPLES
selectBox.on('close', ev => {
  console.log('close');
});

disableselectBox.jsline 439

Occurs when a select box, item group or item is disabled.

PROPERTIES
NameTypeDescription

type

string

event name ('disable')

target

SelectBoxItemGroupItem

disabled target

EXAMPLES
selectBox.on('disable', ev => {
  console.log(ev.target);
});

enableselectBox.jsline 482

Occurs when a select box, item group or item is enabled.

PROPERTIES
NameTypeDescription

type

string

event name ('enable')

target

SelectBoxItemGroupItem

enable target

EXAMPLES
selectBox.on('enable', ev => {
  console.log(ev.target);
});

openselectBox.jsline 515

Occurs when a select box opens.

PROPERTIES
NameTypeDescription

type

string

event name ('open')

EXAMPLES
selectBox.on('open', ev => {
  console.log('open');
});
Resizable