Enhanced Dropdown Select In Pure JavaScript – LC-select

LC-select is a dependency-free JavaScript library designed to enhance the native select element with advanced features like custom images, live search, and much more.

More Features:

• Dark & Light themes.
• Select multiple options just like a tag input.
• Responsive and mobile friendly.

How to use it:

1. Download and include the LC-select’s files on the 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 on your existing select element and done.

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

3. Add custom images to options using 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 select.

<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 to enable the live search functionality. Default: true.

new lc_select(document.querySelector('select'), {
    enable_search  : true,
    min_for_search : 7, // 7 results to show
});

6. Determine the maximum number of options allowed to select in a multi select.

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 methods.

// re-sync
const resyncEvent = new Event('lc-select-refresh');
select.dispatchEvent(resyncEvent);

// destroy
const destroyEvent = new Event('lc-select-destroy');
select.dispatchEvent(destroyEvent);

Changelog:

v1.3.0 (09/12/2025)

• new: now supporting mixed grouped/ungrouped options
• fixed: ignoring selects without NAME to not break the parsing

v1.2.0 (06/27/2025)

• HTML accessibility improvements
• better CSS managing multiple choices rendering

v1.1.11 (06/25/2025)

• Improved HTML structure acessibility

v1.1.10 (03/04/2025)

• fixed: javascript error occurring when “lc-select-refresh” event is fired on an hidden dropdown

v1.1.9 (03/01/2025)

• added: attribute reporting the select name in a dropdown attribute

v1.1.8 (06/06/2023)

• new: improved “inherit” width, considering dropdown paddings and images

v1.1.7 (10/18/2022)

• bugfix

v1.1.6 (06/15/2022)

• added “padding: 0” to dropdown list to avoid interferences

v1.1.5 (09/21/2021)

• placeholder text safely escaped before usage

v1.1.4 (06/30/2021)

• fixed: options automatically sorted alphabetically
• fixed: page scroll when dropdown scroll reached the end

v1.1.3 (03/18/2021)

• “change” event now bubbles for better (jQuery) compatibility

The post Enhanced Dropdown Select In Pure JavaScript – LC-select appeared first on CSS Script.