Selectron

bower install --save jquery-selectron

HTML

<select class="selectron">
  <option value="">Please select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

JS

$('.selectron').selectron();

$('.selectron').selectron({
  search: true
});

<select class="selectron" data-selectron-search="true">
  <option value="">Please select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

There are three default themes, light, dark and block. The light theme is applied by default, to apply the dark theme simply add the selectron--dark class to your select and to apply the block theme simply add selectron--block

<select class="selectron selectron--dark">
  <option value="">Please select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<select class="selectron selectron--block">
  <option value="">Please select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

You can add an icon to your options by simply adding a data-icon attribute to the option.

<select class="selectron">
  <option value="">Please select something</option>
  <option value="1" data-icon="http://placehold.it/30x20">Option 1</option>
  <option value="2" data-icon="http://placehold.it/30x20">Option 2</option>
</select>

Any classes you add to your select or option will get copied across to selectron, this is useful for custom themes or for adding icons to options.

<select class="selectron my-class">
  <option value="">Please select something</option>
  <option class="my-class" value="1">Option 1</option>
  <option class="my-class" value="2">Option 2</option>
</select>

Selectron has been written to be easily customized using Sass variables. To overwrite the defaults simply define your variables before the inclusion of selectron.sass.

SASS VARIABLES

$selectron-border-radius:           4px !default
$selectron-border-width:            1px !default
$selectron-color-background-dark:   #363636 !default
$selectron-color-background-light:  #ffffff !default
$selectron-color-brand:             #f70c36 !default

$selectron-color-font-dark:         #666666 !default
$selectron-color-font-light:        #999999 !default
$selectron-font-family:             sans-serif !default
$selectron-font-size:               13px !default
$selectron-line-height:             1.2 !default
$selectron-text-align:              left !default

$selectron-max-width:               400px !default
$selectron-min-width:               200px !default
$selectron-height:                  50px !default
$selectron-options-max-height:      200px !default

$selectron-padding:                 17px 50px 18px 18px !default
$selectron-option-padding:          13px 18px 14px !default
$selectron-optgroup-padding:        13px 18px 14px 28px !default

$selectron-arrow-border-width:      2px !default
$selectron-arrow-border-radius:     0px !default
$selectron-arrow-size:              10px !default
$selectron-arrow-size:              10px !default
$selectron-block-width:             50px !default

$selectron-max-icon-size:           50px !default
$selectron-icon-margin:             0 10px 0px 0 !default

Selectron triggers a change event on the select for you to listen to as you would with a normal select.

JS

$('select').on('change', function() {
  // Do something here;
});

Selectron provides an selectron.update method which when triggered on the select will re-populate the options.

JS

$('select')
  .append('<option value="val">Some option</option>')
  .trigger('selectron.update');

Selectron also provides a selectron.change method which when triggered on the select will update selectron to match the value of the select

JS

$('select')
  .val(1)
  .trigger('selectron.change');