Example SimpSelect


<script>
  new SimpleSelect('.jsSimpSelect')
</script>

Select/multiselect without setting

Custom FLOAT (min 1500px)

Cancel FLOAT (default <= 767)

Not show selected titles

Confirm selected

Confirm selected (js initialization)

Show number of selected titles (default: 3)

HTML content (after and before) in option (only DOM elements)

HTML content (after and before) for all options (only DOM elements)

Select All

Reset All

Select and Reset All

Debounce time (or at closing)

Search in dropdown

Show checkbox for select

Add classes for wrapper

Dropdown always open

Dropdown always open and remove top (Title, arrow, search)

Locale

list native On Device (default: 'Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk')

detect Native (return boolean)

Dropdown up

Custom Dom Events


window.addEventListener('load', () => {
  new SimpleSelect('#example_24_select', {
    isUp: true
  })
  const $customEvents = document.getElementById('example_24_select');
  $customEvents.addEventListener('change', (e) => {
    console.log('change', e);
  });
  $customEvents.addEventListener('simpSelect:createListBuild', (e) => {
    console.log('createListBuild', e);
  });
  $customEvents.addEventListener('simpSelect:open.before', (e) => {
    console.log('open.before', e);
  });
  $customEvents.addEventListener('simpSelect:open.after', (e) => {
    console.log('open.after', e);
  });
  $customEvents.addEventListener('simpSelect:close.before', (e) => {
    console.log('close.before', e);
  });
  $customEvents.addEventListener('simpSelect:close.after', (e) => {
    console.log('close.after', e);
  });
  $customEvents.addEventListener('simpSelect:selectAll', (e) => {
    console.log('selectAll', e);
  });
  $customEvents.addEventListener('simpSelect:resetAll', (e) => {
    console.log('resetAll', e);
  });
  $customEvents.addEventListener('simpSelect:updateHistory', (e) => {
    console.log('updateHistory', e);
  });
})