<th id="iz4v9"></th>

<rp id="iz4v9"></rp>
<th id="iz4v9"><big id="iz4v9"></big></th>
<nav id="iz4v9"><center id="iz4v9"><td id="iz4v9"></td></center></nav>

<rp id="iz4v9"></rp>
    1. <em id="iz4v9"></em>

      jQuery Selectric 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, element, index) {
          return element.val().length ? '<span class="ico ico-' + element.val() +  '"></span>' + itemData.text : itemData.text;
        }
      });

      
            

      Theme

      Download CSS View RAW CSS