simp-select

Replacing native select, multiselect

Features

• ~44 KB
• no dependencies
• select, multiselect
• Optgroup
• Search
• Mobile native select (setting)

Installation

npm install simp-select --save

Or you can load it via a script tag as follows:

<script src="https://unpkg.com/simp-select@1.2.3/dist/simpleSelect.js" ></script>
<script src="https://unpkg.com/simp-select@1.2.3/dist/polyfill.js" ></script> - for IE 11
Or get last version
<script src="https://unpkg.com/simp-select"></script>

Importing

ES6

import SimpSelect from 'simp-select';
Types
import { ISimpleSelectProps, ISimpleSelectLocale } from 'simp-select/dist/types/simpleSelect.types';

CommonJS

var SimpSelect = require('simp-select');

Global variable

the variable SimpSelect attached to window or this depending on what environment you are using

API

new SimpSelect(selector, <options>)

Property	Value
selector(required)	string(css selector), HTMLSelectElement, HTMLSelectElement(Array, HTMLSelectElement)
OPTIONS:
countShowSelected:number*	default: 3 Show count selected options. If more then this count, showed template: Selected: 4 Or - data-simple-count-shows-selected="3" - in select
isSearch:boolean*	default: false Show input for filter items Or - data-simple-select-search="true" - in select
isSearchInDropdown:boolean*	default: false Show search input inside dropdown Or - data-simple-select-search-dropdown="true" - in select
isConfirmInMulti:boolean*	default: false Show buttons OK and Cancel. Only Multiselect Or data-simple-is-confirm="true" - in select
isConfirmInMultiOkClickOutside:boolean	default: false Click outside like click by button OK. Only if isConfirmInMulti=true
nativeOnDevice:string[]	default: 'Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk' The system default select list is rendered on the matched device(Check useragent ).
debounceTime:number*	default: 0 The change event will not be triggered immediately, but after a specified amount of time. Or data-simple-debounce-time="1000" in select
floatWidth:number*	default: 767 Minimum screen width of device below which the dropdown is rendered like popup. Or data-simple-float-width="500" in select. Or data-simple-float-none="true" - cancel for select
sepChars:string	default: , Separator for selected element. Show
selectAll:boolean*	default: false Show button - Select all Or data-simple-select-all="true" in select
selectAllAfterClose:boolean	default: true Close dropdown after click for select all
resetAll:boolean*	default: false Show button - Reset all Or data-simple-reset-all="true" in select
resetAllAfterClose:boolean	default: true Close dropdown after click for Reset all
isCloneClass:boolean	default: true Clone class from native select to wrapper created select
isRemoveTop:boolean*	default: false Do not create top element (Title, arrow, search ) (default: false) Or data-simple-remove-top="true" in select
isUp:boolean*	default: false Dropdown rendering the direction in which to open the dropdown (default: false) Or data-simple-up="true" in select
isAlwaysOpen:boolean*	default: false Dropdown always open (default: false) Or data-simple-always-open="true" in select
isAlwaysOpenShowDisabledTabindex:boolean*	default: false Set tabindex (tabindex="0") for disabled element (In Always open list)
isOnlyPlaceholder:boolean*	default: false Show only placeholder. Don't show selected options (default: false) Or data-simple-is-only-placeholder="true" in select
isLabelMode:boolean*	default: false Always displays the placeholder text as a persistent top-level label, even after a value is selected. See Note Or data-is-label-mode="true" in select
detectNative:function	default: none Return true if need rendering native select
changeBodyLi:function	default: none Custom (body) item renderer
locale:{key: string}	default: simpleSelectLocale ** Object of locales. **
historyMaxSize: number	default: 0 Maximum number of saved changes.
isScrollToCheckedFirst: boolean	default: true Scroll to the first element. This works only on the first opening.
isScrollToCheckedAlways: boolean	default: false Scroll to the first element. This works on each opening.
isDebounceStatusBar: boolean	default: false Status bar if multiselect has debounce. Or data-simple-debounce-status-bar="true" in select
isDebounceStatusBarBottom: boolean	default: false Location of the bar status in the dropdown (default in the Top element)
isNeedFormatTitle: boolean	default: false If you need to clear the line for the title
formatTitle: function	default: none Custom Line Clearing Function for Title
isSetAttributeSizeMultiple: boolean	default: '' Add classes for wrapper SimpSelect. Or data-simple-add-classes="class1 class2" in select
attributeSizeMultiple: number	default: true (If the attribute is not set for Select) Set attribute "size" for seletct multiple
addClasses: string	default: 1 Value for attribute "size" for seletct multiple
Options only DOM elements
data-simple-placeholder="text": Select	Replace default placeholder (locale.title)
data-simple-item-html-before=" before : Select	Add HTML before content (for item Li)
data-simple-item-html-after=" after ": Select	Add HTML after content (for item Li)
data-simple-add-classes="class1 class2": Select	Add classes for wrapper SimpSelect
data-simple-html-before="before": option	Add HTML before content (for item Li)
data-simple-html-after="after": option	Add HTML after content (for item Li)
data-simple-show-checkbox: Select	Show checkbox in item (Li) (for single select)
Callbacks
callbackInitialization: (item:SimpleSelectItem) => void	Before initialization
callbackInitialized:(item:SimpleSelectItem) => void;	After initialization
callbackOpen: (item:SimpleSelectItem) => void;	Open dropdown
callbackClose: (item:SimpleSelectItem) => void;	Close dropdown
callbackDestroyInit: (item:SimpleSelectItem) => void;	Before destroy SimpSelect
callbackDestroy: (item:SimpleSelectItem) => void;	After destroy SimpSelect
callbackChangeSelect :(e: Event, item:SimpleSelectItem) => void;	Change SimpSelect (change options)
Methods
reload:select(DomElement).SimpSelect.reload()	Reload SimpSelect.
update:select(DomElement).SimpSelect.update()	Update list (ul in dropdown)
detach:select(DomElement).SimpSelect.detach()	Detach SimpSelect.
getHistory:select(DomElement).SimpSelect.getHistory()	Get history.
getHistoryLast:select(DomElement).SimpSelect.getHistoryLast()	Get history - last element.
getHistoryFirst:select(DomElement).SimpSelect.getHistoryFirst()	Get history - first element.
getInstance:select(DomElement).SimpSelect.getInstance()	Get instance SimpSelect.
const simpleSelect = new SimpleSelect('select')	Instance of the SimpleSelect plugin object
getSelectById('ID'):simpleSelect.getSelectById('ID')	Get item SimpSelect for ID (data-simple-select-init="ID" - dem element select)
getSelectFirst():simpleSelect.getSelectFirst()	Get first item SimpSelect
getSelects():simpleSelect.getSelects()	Get list SimpSelect
getSelects():simpleSelect.getSelects()	Get list SimpSelect

*Data attributes in DOM element(select) more important than initialization options.

💡 Note on Floating Label Styling

When isLabelMode is enabled, the plugin automatically toggles CSS state classes and handles basic placeholder visibility out of the box.

You can easily customize the look of the floating label using these state classes:

• SimpleSel--fill_with_value — Active when a real value is selected (label floats up).
• SimpleSel--fill_without_value — Active when the selection is empty (label rests in the center).

Example Nesting CSS:

/* Customizing the floating label when it moves to the top */
.SimpleSel--label_mode.SimpleSel--fill_with_value {
  .SimpleSel__label {
    color: #007bff; /* Change label color when active */
    font-weight: 600;
  }
}

**Object of locales.
const simpleSelectLocale: = {
  noSearch: 'No matches for',
  searchText: 'Search',
  title: 'Select',
  selected: 'Selected:',
  all: 'all',
  ok: 'Ok',
  cancel: 'Cancel',
  selectAll: 'Select all',
  resetAll: 'Reset all',
};

Example Usage

import SimpleSelect from 'simp-select';

new SimpleSelect('select');

Demo

View Live Demo Here.

Browser Support

Supported on all modern browsers

For IE 11 need polyfills (Or Include file polyfill.js):

window.CustomEvent, Array.from, Array.prototype.forEach, NodeList.prototype.forEach, Element.prototype.matches,Element.prototype.closest