Superlight Vanilla JS Dropdowns | LC-select

Superlight Vanilla javascript plugin, for modern dropdown web menus. Support multiple options, searches, 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 18 KB, no dependencies, 100% pure JavaScript
  • Two themes (light, and 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

Must Read: A Prettier Way To Display Select Boxes | vue-dropdowns

How to make use of it:

1. Download and embody the LC-select 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 options.

new lc_select(document.querySelector('select'), {
    // options here

3. Here are listed available options with default values:

<script type="text/javascript>
new lc_select('select', {

    // (bool) whether to enable fields search
    enable_search : true, 
    // (int) minimum options number to show search
    min_for_search : 7,   
    // (bool) whether to automatically focus search field on desktop (NB: will break tabindex chain)
    autofocus_search: false,
    // (string) defines the wrapper width: "auto" to leave it up to CSS, "inherit" 
    // to statically copy input field width, or any other CSS sizing 
    wrap_width : 'auto',
    // (array) custom classes assigned to the field wrapper (.lcslt-wrap) and 
    // dropdown (#lc-select-dd)
    addit_classes : [], 
    // (bool) if true, on simple dropdowns without a selected value, prepend 
    // an empty option using placeholder text
    pre_placeh_opt : false, 
    // (int|false) defining maximum selectable options for multi-select
    max_opts : false, 
    // (function) triggered every time field value changes. Passes value and 
    // target field object as parameters
    on_change : null, // function(new_value, target_field) {},

    // (array) option used to translate script texts
    labels : [ 
        'search options',
        'add options',
        'Select options ..',
        '.. no matching options ..',

See Demo And Download

Official Website(LCweb-ita): Click Here

This superior jQuery/javascript plugin is developed by LCweb-ita. For extra Advanced usage, please go to the official website.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…