Press "Enter" to skip to content

Superlight Vanilla JS Dropdowns | LC-select

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

    Leave a Reply

    Your email address will not be published.