Basic SelectBoxIt

Basic SelectBoxIt

Add .selectBox class to select for basic SelectBoxIt field

SelectBoxIt with Label

Use .selectBox-label-default class to add label to Select field

SelectBoxIt supports optgroup
Disabled SelectBoxIt
SelectBoxIt with selected & disabled options
SelectBoxIt Open/close Effects

Add .selectBox-effect class to select for opening & Closing effects

SelectBoxIt Open/close Animations

Add .selectBox-animation class to select for SelectBoxIt field animation.

SelectBoxIt Options

Hide First option

Add .selectBox-hide-first class to hide first field of select

Option size

Add data-size attribute to select to show number of options at a time

Custom text [Select Birmingham/Leeds]

Add data-selectedtext attribute to select option for custom text value

Prevent Closing [Clicking 'Berlin' option will not close the options list. ]

Add data-preventclose attribute to prevent closing

Aggressive Change Mode

Aggressive Change Mode will select a drop down option when user navigates option using up and down arrow keys via the keyboard

Native Mousedown Mode

Click and hold down your mouse, hover over a drop down option, and then release the mouse to select that option.

Advance Options Manipulations

Add Option Dynamically

Use .options-dynamic class with .selectBox class to add dynamic option

Remove First Option

Use .option-remove class with .selectBox class to remove option dynamically

Remove Multiple Options

Use .options-remove class with .selectBox class to remove multiple options

Remove Multiple Options

Use .remove-all class with .selectBox class to select and id #remove-all to button to remove all the options

Hide Current Selected Options

Use .selectBox-hide-current class to Hide Current selected option

Advanced Object usage

This Advance Object will be more clear from it's javascript.

Single Object
HTML String
Strings Array
Array Of Objects
JSON Array
SelectBox Deferred Object

With Icons and Images

Change icon support

Use .selectBox-right-icon class to change down arrow icon.

Custom Image support

Use data-iconurl attribute and Image URL as value to show Image.

Change icon support

Use data-icon attribute and icon name as value to show Icon.

Advance Options

HTML support
Bootstrap Option Popovers

Use data-toggle="popover" attribute so it will popover title & data-contenttext

Bootstrap Arrow support

Use .selectBox .bootstrap-icon class to change down arrow icon as bootstrap icon.

Custom Bootstrap Arrow support

Use .custom-bootstrap-icon class to change down arrow icon as bootstrap icon.

Grid Based Sizing

SelectBox Label
SelectBox Label
SelectBox Label
SelectBox Label
SelectBox Label
SelectBox Label
SelectBox Label
SelectBox Label
SelectBox Label
SelectBox Label
SelectBox Label
SelectBox Label

Selectbox Width Options

Full width (Default)
Grid Based Width

This is in 8 column grid

Fixed Width

Use .selectBox-fixed class for fixed width.

Auto Width

Use .selectBox-auto class for Auto width of selectBox

Selectbox Height Options

XLarge SelectBox

Use .selectBox-xl class for Extra Large selectBox

Large selectBox

Use .selectBox-lg class for Large selectBox

Default selectBox
Small selectBox

Use .selectBox-sm class for small selectBox

Border Color Options

Primary selectBox

Use .border-primary class for primary color selectBox

Success selectBox

Use .border-success class for success color selectBox

Danger selectBox

Use .border-danger class for danger color selectBox

Info selectBox

Use .border-info class for info color selectBox

Warning selectBox

Use .border-warning class for warning color selectBox

Custom Border SelectBox

SelectBox Color Options

Primary selectBox

Use .bg-primary class for primary color selectBox

Success selectBox

Use .bg-success class for success color selectBox

Danger selectBox

Use .bg-danger class for danger color selectBox

Info selectBox

Use .bg-info class for info color selectBox

Warning selectBox

Use .bg-warning class for warning color selectBox

Custom Color SelectBox