jquery-custom-select

Default Features

• Classes of <option> elements are copied.

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect();
  

• If original <select> have explicitly selected <option> (with selected attribute) custom select shows it as chosen value.

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect();
  

• Attribute disabled of original <option> is copied to custom select option.

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect();
  

Options

• block (type: string, default: 'custom-select') Custom select BEM block name.

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect({
      block: 'my-select'
    });
  

• includeValue (type: boolean, default: false) Adds chosen value option to dropdown. If enabled also cancels dropdown options rerender.

  Dropdown always includes all options of original select. Current value is not removed & is marked with selected modifier.

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect({
      includeValue: true
    });
  

• keyboard (type: boolean, default: true) Enables keyboard control.

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect({
      keyboard: false
    });
  

• modifier (type: string, default: false) Custom select block BEM modifier.

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect({
      modifier: 'custom-select--dark'
    });
  

• placeholder (type: string, default: false) Placeholder hint, can be an HTML string (appears only if there is no explicitly selected options).

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect({
      placeholder: '<span style="color: darkgray;">Please Select</span>'
    });
  

• search (type: boolean, default: false) Adds input to filter options.

  Search input appears in dropdown to filter options.

  First Item Second Item Third Item Fourth Item Fifth Item Sixth Item Seventh Item Eighth Item Ninth Item

    $('select').customSelect({
      search: true
    });
  

• transition (type: number | string, default: 0) jQuery slideUp/Down param.

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect({
      transition: 400
    });
  

• hideCallback (type: Function, default: false) Fires after dropdown closes.

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect({
      hideCallback: function () {
        var $value = $(this).find('[class$="value"]');
        console.log(`Dropdown closed! Value text is "${$value.text()}".`);
      }
    });
  

• showCallback (type: Function, default: false) Fires after dropdown opens.

  First Item Second Item Third Item Fourth Item Fifth Item

    $('select').customSelect({
      showCallback: function () {
        console.log('Dropdown opened!');
      }
    });
  

Methods

• reset Reinits custom select instance.

  First Item Second Item Third Item Fourth Item Fifth Item Change to numbers

    var $select = $('select');
  
    $select.customSelect();
  
    $('button').on('click', function () {  
      updateSelect(); // Update original select 
        
      $select.customSelect('reset');
    });