jQuery Selectric

$('select').selectric();

// Cache the target element
var $selectValue = $('#select_value').find('strong');

// Get initial value
$selectValue.text($('#get_value').val());

// Initialize Selectric and bind to 'change' event
$('#get_value').selectric().on('change', function() {
  $selectValue.text($(this).val());
});

$('#set_value').selectric();

$('#set_first_option').on('click', function() {
  $('#set_value').prop('selectedIndex', 0).selectric('refresh');
});

$('#set_second_option').on('click', function() {
  $('#set_value').prop('selectedIndex', 1).selectric('refresh');
});

$('#set_third_option').on('click', function() {
  $('#set_value').prop('selectedIndex', 2).selectric('refresh');
});

$('#dynamic').selectric();

$('#bt_add_val').click(function() {
  // Store the value in a variable
  var value = $('#add_val').val();

  // Append to original select
  $('#dynamic').append('<option>' + (value ? value : 'Empty') + '</option>');

  // Refresh Selectric
  $('#dynamic').selectric('refresh');
});

// With events
$('#callbacks')
  .on('selectric-before-open', function() {
    alert('Before open');
  })
  .on('selectric-before-close', function() {
    alert('Before close');
  })
  // You can bind to change event on original element
  .on('change', function() {
    alert('Change');
  });

// Or, with plugin options
$('#callbacks').selectric({
  onOpen: function() {
    alert('Open');
  },
  onChange: function() {
    alert('Change');
  },
  onClose: function() {
    alert('Close');
  }
});

$.get('ajax.html', function(data) {
  $('#ajax').append(data).selectric();
});

<!-- File: ajax.html -->
<option value="strawberries">Strawberries</option>
<option value="mango">Mango</option>
<option value="bananas">Bananas</option>
<option value="watermelon">Watermelon</option>
<option value="apples">Apples</option>
<option value="grapes">Grapes</option>
<option value="oranges">Oranges</option>
<option value="pineapple">Pineapple</option>
<option value="peaches">Peaches</option>
<option value="cherries">Cherries</option>

$('.custom-options').selectric({
      optionsItemBuilder: function(itemData) {
        return itemData.value.length ?
          '<span class="ico ico-' + itemData.value +  '"></span>' + itemData.text :
          itemData.text;
      }
});

.selectric-custom-options .ico {
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
  height: 30px;
  width: 30px;
  margin: 0 6px 0 0;
  background: url(./img/browser-icons.png) no-repeat;
}

.selectric-custom-options .ico-chrome  { background-position: 0 0; }
.selectric-custom-options .ico-firefox { background-position: -30px 0; }
.selectric-custom-options .ico-ie      { background-position: -60px 0; }
.selectric-custom-options .ico-opera   { background-position: -90px 0; }
.selectric-custom-options .ico-safari  { background-position: -120px 0; }

$('select').selectric({ forceRenderAbove: true });

$('select').selectric({ forceRenderBelow: true });