Minimal Custom Dropdown Box – custom-select.js

Category: Form , Javascript | April 29, 2022
Author:kievwarlock
Views Total:1,004 views
Official Page:Go to website
Last Update:April 29, 2022
License:MIT

Preview:

Minimal Custom Dropdown Box – custom-select.js

Description:

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);
})

You Might Be Interested In:


Leave a Reply