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/[email protected]/dist/simpleSelect.js" ></script>
<script src="https://unpkg.com/[email protected]/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: 4Or - 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