jQuery Selectric

Basic usage

Long item, lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, consectetur, repellat animi nam veniam tempora hic
  • Long item, lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, consectetur, repellat animi nam veniam tempora hic
  • Strawberries
  • Mango
  • Bananas
  • Watermelon
  • Apples
  • Grapes
  • Oranges
  • Pineapple
  • Peaches
  • Cherries
    • Group 1
    • Option 1.1
    • Group 2
    • Option 2.1
    • Option 2.2
    • Group 3
    • Option 3.1
    • Option 3.2
    • Option 3.3
$('select').selectric();

Get selected option value

Strawberries
  • Strawberries
  • Mango
  • Bananas
  • Watermelon
  • Apples
  • Grapes
  • Oranges
  • Pineapple
  • Peaches
  • Cherries

Current value: strawberries

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

First option
  • First option
  • Second option
  • Third option

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

Strawberries
  • Strawberries
  • Mango
  • Bananas
  • Watermelon
  • Apples
  • Grapes
  • Oranges
  • Pineapple
  • Peaches
  • Cherries

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

Strawberries
  • Strawberries
  • Mango
  • Bananas
  • Watermelon
  • Apples
  • Grapes
  • Oranges
  • Pineapple
  • Peaches
  • Cherries
// 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();
});

Loading…

Custom markup for items box

Select with icons
  • Select with icons
  • Firefox
  • Chrome
  • Safari
  • Internet Explorer
  • Opera
$('.custom-options').selectric({
      optionsItemBuilder: function(itemData) {
        return itemData.value.length ?
          '<span class="ico ico-' + itemData.value +  '"></span>' + itemData.text :
          itemData.text;
      }
});

Loading…

Force render above

lorem
  • lorem
  • ipsum
  • dolor
$('select').selectric({ forceRenderAbove: true });

Force render below

lorem
  • lorem
  • ipsum
  • dolor
$('select').selectric({ forceRenderBelow: true });

主题样式选择

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.

来源:站长素材