Minimal Custom Dropdown Box – custom-select.js

This is a small JavaScript library that can be used to create fully customizable and functional dropdown boxes in vanilla JavaScript.

No dependencies are needed. It uses CSS selectors to style options and values, not just <select>.

How to use it:

1. Load the JavaScript custom-select.js and Stylesheet custom-select.css.

<script defer src="/js/custom-select.js"></script>
<link href="/css/custom-select.css" rel="stylesheet" />

2. Initialize the CustomSelect on your <select>.

<select class="custom-select">
  <option value="1"> Test 1</option>
  <option value="2"> Test 2</option>
  <option value="3"> Test 3</option>
  ...
</select>

const customSelect = new CustomSelect('.custom-select');

3. Get the current option value.

customSelect.getValue()

4. Set the value of the option.

customSelect.setValue('5')

5. Perform a function when the option changes.

customSelect.onChange( (data) => {
  console.log('onChange', data);
})