Author: | lamka02sk |
---|---|
Views Total: | 1,239 views |
Official Page: | Go to website |
Last Update: | June 6, 2018 |
License: | MIT |
Preview:

Description:
A minimal, pure JavaScript plugin that transforms the regular select element into a beautiful, convenient, searchable/filterable dropdown list.
How to use it:
Load the main JavaScript and CSS files in your html file.
<link rel="stylesheet" href="main.min.css"> <script src="main.min.js"></script>
Add the CSS class ‘selector-instance’ to your existing select element as this:
<select class="selector-instance" name="first-selector" id="first"> <option value="1" data-sublocale="HELLO" selected>Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> <option value="5">Item 5</option> <option value="6">Item 6</option> </select>
Initialize the Selector and done.
new Selector();
If you want to display a search field inside the dropdown list, just add the attribute data-type="search-selector"
to the select and done.
<select class="selector-instance" data-type="search-selector" name="third-selector" id="second"> <option value="1" data-sublocale="HELLO" selected>Item 1</option> <option value="2">Item 2</option> <option value="3">Item 3</option> <option value="4">Item 4</option> <option value="5">Item 5</option> <option value="6">Item 6</option> <option value="7">Item 7</option> <option value="8">Item 8</option> <option value="9">Item 9</option> <option value="10">Item 10</option> </select>
Possible options with default values.
new Selector({ // selector selector: null, // target element element: null, // custom label label: null, // normal and filter type: null, // disable selector instance disabled: false, // distinguish between multiple instances identifier: null, // makes opened options cover selected item box cover: false, // relative positioned relative: false // callbacks callback: null, onOpen: null, onClose: null, onSelect: null, // hooks destroy: null, created: null, opened: null, closed: null, selected: null, beforeCreate: null, beforeDestroy: null, destroyed: null, beforeSelect: null, });
Changelog:
v3.2.0 (06/06/2018)
- added more options
Hi, thanks for this nice searchable dropdown list. A problem that is exist is that I am not able change the selected option dynamically.