About select

This jQuery plugin allows you to add a custom select HTML element to your Bootstrap form. This custom select HTML element can be fully customized to display the options matching the look and feel you want using HTML and CSS.

Examples

Simple example for adding a select HTML element.

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15
<div class="bfh-selectbox" data-name="selectbox1">
  <div data-value="1">Option 1</div>
  <div data-value="2">Option 2</div>
  <div data-value="3">Option 3</div>
  <div data-value="4">Option 4</div>
  <div data-value="5">Option 5</div>
  <div data-value="6">Option 6</div>
  <div data-value="7">Option 7</div>
  <div data-value="8">Option 8</div>
  <div data-value="9">Option 9</div>
  <div data-value="10">Option 10</div>
  <div data-value="11">Option 11</div>
  <div data-value="12">Option 12</div>
  <div data-value="13">Option 13</div>
  <div data-value="14">Option 14</div>
  <div data-value="15">Option 15</div>
</div>

Simple example for adding a select HTML element and selecting a default option.

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15
<div class="bfh-selectbox" data-name="selectbox2" data-value="12">
  <div data-value="1">Option 1</div>
  <div data-value="2">Option 2</div>
  <div data-value="3">Option 3</div>
  <div data-value="4">Option 4</div>
  <div data-value="5">Option 5</div>
  <div data-value="6">Option 6</div>
  <div data-value="7">Option 7</div>
  <div data-value="8">Option 8</div>
  <div data-value="9">Option 9</div>
  <div data-value="10">Option 10</div>
  <div data-value="11">Option 11</div>
  <div data-value="12">Option 12</div>
  <div data-value="13">Option 13</div>
  <div data-value="14">Option 14</div>
  <div data-value="15">Option 15</div>
</div>

Simple example for adding a select HTML element with a filter.

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
Option 10
Option 11
Option 12
Option 13
Option 14
Option 15
<div class="bfh-selectbox" data-name="selectbox3" data-value="12" data-filter="true">
  <div data-value="1">Option 1</div>
  <div data-value="2">Option 2</div>
  <div data-value="3">Option 3</div>
  <div data-value="4">Option 4</div>
  <div data-value="5">Option 5</div>
  <div data-value="6">Option 6</div>
  <div data-value="7">Option 7</div>
  <div data-value="8">Option 8</div>
  <div data-value="9">Option 9</div>
  <div data-value="10">Option 10</div>
  <div data-value="11">Option 11</div>
  <div data-value="12">Option 12</div>
  <div data-value="13">Option 13</div>
  <div data-value="14">Option 14</div>
  <div data-value="15">Option 15</div>
</div>

Available languages

Not applicable.

Options

Option Description
icon String. Class name for the caret icon of the toggle. Default: 'caret'
input String. Class name for styling the input. Default: 'form-control'
name String. Name of the input. Default: ''
value String. Initial value to select. Default: ''
filter Boolean. Set to display a filter to search the options. Default: false

Methods

Method Description
$().bfhselectbox('toggle') Toggles the select options.

Events

Event Description
change.bfhselectbox This event fires immediately when an option is selected.
show.bfhselectbox This event fires immediately when the show instance method is called.
shown.bfhselectbox This event is fired when the select has been made visible to the user (will wait for CSS transitions, to complete).
hide.bfhselectbox This event is fired immediately when the hide instance method has been called.
hidden.bfhselectbox This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).