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
addEmptyValue data-add-empty-value false Add option with empty value
emptyValue data-empty-value Empty value for select. Used for clear button click event and default empty option
clearButton data-clear-button false Enable|disable clear button. Click in clear button flush value to value defined on attr data-empty-value
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>
                

Additional classes

You can use additional classes to change input size: .input-large and .input-small.

Input small
Input regular
Input large