### Select Box It

SelectBoxIt allows you to replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs.

#### 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-content`text

###### 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 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