Feature-rich Custom Select JavaScript Library – SimpSelect

SimpSelect is a powerful and feature-rich JavaScript custom select library designed to enhance the user experience of the native <select /> element on your webpage.

It offers a visually appealing alternative to the default HTML select element, with features like showing a checkbox before each option, displaying the selected option(s), and providing confirm selection buttons.

Additionally, SimpSelect allows for the inclusion of HTML content within the options, as well as Select All and Deselect All buttons, and a live search functionality.

How to use it:

1. Install and import the SimpSelect with NPM.

# NPM
$ npm install simp-select

import SimpSelect from 'simp-select';

2. Or include the following files on the webpage.

<link rel="stylesheet" href="/dist/style.css">
<script src="/dist/simpleSelect.js" ></script>
<!-- Polyfill for IE 11 -->
<script src="/dist/polyfill.js" ></script>

3. Call the function SimpleSelect on your existing select element and the library will do the rest.

new SimpleSelect('#mySelect', {
    // options here
})

4. Available options & callbacks to customize the custom select.

new SimpleSelect('#mySelect', {
    countShowSelected: number
    isConfirmInMulti: boolean;
    isConfirmInMultiOkClickOutside: boolean;
    searchTypeInput: string;
    isSearch: boolean;
    isSearchInDropdown: boolean;
    nativeOnDevice: string[];
    locale: {
      noSearch: string;
      searchText: string;
      title: string;
      selected: string;
      all: string;
      ok: string;
      cancel: string;
      resetAll: string;
      selectAll: string;
    };
    debounceTime?: number;
    floatWidth?: number;
    isRemoveTop: boolean,
    sepChars: string;
    historyMaxSize: number;
    selectAll: boolean;
    selectAllAfterClose: boolean;
    resetAll: boolean;
    resetAllAfterClose: boolean;
    isCloneClass: boolean;
    isOnlyPlaceholder: boolean;
    isUp: boolean;
    isAlwaysOpen: boolean;
    isAlwaysOpenShowDisabledTabindex: boolean;
    detectNative?: () => boolean;
    // callbacks
    callbackInitialization?: (item:SimpleSelectItem) => void;
    callbackInitialized?: (item:SimpleSelectItem) => void;
    callbackOpen?: (item:SimpleSelectItem) => void;
    callbackClose?: (item:SimpleSelectItem) => void;
    callbackDestroyInit?: (item:SimpleSelectItem) => void;
    callbackDestroy?: (item:SimpleSelectItem) => void;
    callbackChangeSelect?: (e: Event, item:SimpleSelectItem) => void;
})

5. You can also pass the options via HTML data-simple-OPTION attribute on your select element.

<select
  class="mySelect"
  multiple
  data-simple-placeholder="custom width float"
  data-simple-float-width="1500"
>
  <option value="custom-1">custom float 1</option>
  <option value="custom-2">custom float 2</option>
</select>

6. API methods.

const simpleSelect = new SimpleSelect('select')
select(DomElement).SimpSelect.reload()
select(DomElement).SimpSelect.update()
select(DomElement).SimpSelect.detach()
select(DomElement).SimpSelect.getHistory()
select(DomElement).SimpSelect.getHistoryLast()
select(DomElement).SimpSelect.getHistoryFirst()
simpleSelect.getSelectById('ID') 
simpleSelect.getSelectFirst()
simpleSelect.getSelects()

Changelog:

v1.1.12 (06/27/2025)

• update

v1.1.10 (06/27/2025)

• bugfixes

v1.1.7 (03/01/2025)

• fix scroll

v1.1.6 (02/25/2025)

• fix css variables

v1.1.4 (02/24/2025)

• fix search

v1.1.3 (06/07/2024)

• bugfix

v1.1.2 (06/07/2024)

• add scroll to first checked

v1.1.1 (05/30/2024)

• add event initialized

v1.1.0 (05/29/2024)

• add custom dom events. fix create list

The post Feature-rich Custom Select JavaScript Library – SimpSelect appeared first on CSS Script.