Superlight Vanilla javascript plugin, for modern dropdown web menus. Support multiple options, search, and images. Designed to have a seamless feel.
Superlight vanilla javascript dropdowns by LCweb is a dependency-free JavaScript library designed to enhance the original selection element with advanced features like custom images, live search, and more.
List of most important features:
- Single file 20 KB, no dependencies, 100% pure JavaScript
- Two themes (light, dark) are included. Designed to be themed without any effort
- Features blends support using prefixed specifiers
- Supports both simple and multiple selection fields
- Fully responsive and fits any width
- (Optional) A default placeholder for simple selection fields
- (Optional) Search bar with minimal fields
- (Optional) The maximum number of options selectable
- Full integration of keyboard events
- Support photos option
- Mobile ready
- Multilingual ready
How to make use of it:
1. Download and embody the LC-selectβs information on the web page.
<!-- Light Theme --> <link href="themes/light.css" rel="stylesheet" /> <!-- OR Dark Theme --> <link href="themes/dark.css" rel="stylesheet" /> <!-- Core JavaScript --> <script src="lc_select.js"></script>
2. Just initialize the plugin in your current choose factor and accomplished.
new lc_select(document.querySelector('select'), { // options here });
3. Add customized photographs to choices utilizing the data-image
attribute.
<select name="simple"> <optgroup label="javascript" data-image="js.svg"> <option value="vue" data-image="vue.svg">Vue.js</option> <option value="react" data-image="react.png">React</option> <option value="angular" data-image="angular.png">Angular</option> </optgroup> ... </select>
4. Customize the placeholder for the choice.
<select ata-placeholder="Select A Language..."> <optgroup label="javascript" data-image="js.svg"> <option value="vue" data-image="vue.svg">Vue.js</option> <option value="react" data-image="react.png">React</option> <option value="angular" data-image="angular.png">Angular</option> </optgroup> ... </select>
5. Determine whether or not to allow the reside search functionality.
new lc_select(document.querySelector('select'), { enable_search : true, min_for_search : 7, // 7 results to show });
6. Determine the utmost variety of choices allowed to select in a multi-choice.
new lc_select(document.querySelector('select'), { max_opts: 6 });
7. More default configs.
new lc_select(document.querySelector('select'), { // defines the wrapper width wrap_width: 'auto', // additional CSS classes addit_classes: [], // prepend an empty option using placeholder text pre_placeh_opt : false, // custom labels labels: [ 'search options', 'add options', 'Select options ..', '.. no matching options ..', ], // callback function on_change: function(new_value, target_field) { // do something } });
8. API strategies.
// re-sync const resyncEvent = new Event('lc-select-refresh'); select.dispatchEvent(resyncEvent); // destroy const destroyEvent = new Event('lc-select-destroy'); select.dispatchEvent(destroyEvent);
Enhanced Dropdown Select, LC select LCweb Plugin/Github, jquery custom select dropdown, css style select option dropdown, simple select dropdown, custom select dropdown css only, pure css select dropdown, custom select js, javascript combobox
See Demo And Download
Official Website(LCweb-ita): Click Here
This superior jQuery/javascript plugin is developed by LCweb-ita. For extra Advanced Usages, please go to the official website.
Be First to Comment