# jQuery Selectric

### Basic usage

    $('select').selectric();

### Get selected option value

Current value:

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

    $('#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');
    });

### Change options on the fly

    $('#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');
    });

### Callbacks

    // 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');
      }
    });

### Populate via ajax request

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

### Custom markup for items box

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

### Force render above

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

### Force render below

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

## Theme

### Colors

Primary

Secondary

Label

Button background

Button color

### Sizes

Border width

Roundness

Height

Label indent

Arrow button size

Arrow button roundness

Arrow button position

Download CSS › View RAW CSS