Select
Create a customizable select box with support for searching, tagging and many other highly used options.
About
Metro 4 select was designed to be a replacement for the standard select box that is displayed by the browser.
Select component supports all options and operations that are available in a standard select box, but with added any usefulness features.
To create select component, add attribute data-role="select" to your select HTML element.
<select data-role="select">
...
</select>
Metro 4 select supports singe and multiple modes.
Single select box
To create single select box, add attribute data-role="select" to element.
<select data-role="select">
<optgroup label="Physical servers">
<option value="dedicated_corei3_hp">Core i3 (hp)</option>
<option value="dedicated_pentium_hp">Pentium (hp)</option>
<option value="dedicated_smart_corei3_hp">Smart Core i3 (hp)</option>
</optgroup>
<optgroup label="Virtual hosting">
<option value="mini">Mini</option>
<option value="site">Site</option>
<option value="portal">Portal</option>
</optgroup>
<optgroup label="Virtual servers">
<option value="evps0">eVPS-TEST (30 дней)</option>
<option value="evps1" selected="selected">eVPS-1</option>
<option value="evps2">eVPS-2</option>
</optgroup>
</select>
Multi-select box
Select also supports multi-value select boxes. The select below is declared with the multiple attribute.
<select data-role="select" multiple>
<optgroup label="Physical servers">
<option value="dedicated_corei3_hp">Core i3 (hp)</option>
<option value="dedicated_pentium_hp">Pentium (hp)</option>
<option value="dedicated_smart_corei3_hp">Smart Core i3 (hp)</option>
</optgroup>
<optgroup label="Virtual hosting">
<option value="mini">Mini</option>
<option value="site">Site</option>
<option value="portal">Portal</option>
</optgroup>
<optgroup label="Virtual servers">
<option value="evps0">eVPS-TEST (30 дней)</option>
<option value="evps1" selected="selected">eVPS-1</option>
<option value="evps2">eVPS-2</option>
</optgroup>
</select>
Option template
You can use attribute data-template for option for define html option display.
Example: you need to add icon to option. $1 in template, used for replace by option text.
Single
<select data-role="select">
<option value="1" data-template="<span class='mif-amazon icon'></span> $1">Amazon</option>
<option value="2" data-template="<span class='mif-apple icon'></span> $1">Apple</option>
<option value="3" data-template="<span class='mif-blogger icon'></span> $1">Blogger</option>
<option value="4" data-template="<span class='mif-evernote icon'></span> $1">Evernote</option>
<option value="5" data-template="<span class='mif-github icon'></span> $1">GitHub</option>
</select>
Multiple
<select data-role="select" multiple>
<option value="1" data-template="<span class='mif-amazon icon'></span> $1">Amazon</option>
<option value="2" data-template="<span class='mif-apple icon'></span> $1">Apple</option>
<option value="3" data-template="<span class='mif-blogger icon'></span> $1">Blogger</option>
<option value="4" data-template="<span class='mif-evernote icon'></span> $1">Evernote</option>
<option value="5" data-template="<span class='mif-github icon'></span> $1">GitHub</option>
</select>
Options
| Option | Data-* | Default | Desc |
|---|---|---|---|
duration |
data-duration |
100 | Options list drop-down speed |
prepend |
data-prepend |
Prepend data fo select | |
append |
data-append |
Append data fo select | |
dropHeight |
data-drop-height |
200 | Dropdown height in px |
filter |
data-filter |
true | Dropdown search filter |
filterPlaceholder |
data-filter-placeholder |
Placeholder for search input |
Events
| Event | Data-* | Context | Desc |
|---|---|---|---|
onChange(selected) |
data-on-change |
select | Return selected values. |
onUp(list, select) |
data-on-up |
list | Fired when dropdown list close |
onDown(list, select) |
data-on-down |
list | Fired when dropdown list open |
onItemSelect(val, option, item) |
data-on-item-select |
select | Fired when option selected |
onItemDeselect(option) |
data-on-item-deselect |
select | Fired when option deselected |
onSelectCreate(select) |
data-on-select-create |
select |
Methods
You can use methods to interact with input component:
disable(),
enabled(),
toggleState(),
val(),
val(array_of_values),
data(options),
reset(),
reset(true) - reset to default.
var select = $(el).data('select');
select.val([1, 2, 3]);
console.log(select.val());
Customize
You can customize your select with special attributes:
| Option | Data-* | Desc |
|---|---|---|
clsSelect |
data-cls-select |
Additional classes for select component. |
clsPrepend |
data-cls-prepend |
Additional classes for prepend data. |
clsAppend |
data-cls-append |
Additional classes for append data. |
clsOption |
data-cls-option |
Additional classes for option item. |
clsOptionGroup |
data-cls-option-group |
Additional classes for option group. |
clsDropList |
data-cls-drop-list |
Additional classes for drop options list. |
clsSelectedItem |
data-cls-selected-item |
Additional classes for selected item for multiple. |
clsSelectedItemRemover |
data-cls-selected-item-remover |
Additional classes for selected item remove button for multiple. |
<select data-role="select" multiple
data-cls-option="fg-cyan"
data-cls-selected-item="bg-teal fg-white"
data-cls-selected-item-remover="bg-darkTeal fg-white">
<option value="1" data-template="<span class='mif-amazon icon'></span> $1">Amazon</option>
<option value="2" data-template="<span class='mif-apple icon'></span> $1">Apple</option>
<option value="3" data-template="<span class='mif-blogger icon'></span> $1">Blogger</option>
<option value="4" data-template="<span class='mif-evernote icon'></span> $1">Evernote</option>
<option value="5" data-template="<span class='mif-github icon'></span> $1">GitHub</option>
</select>