kievwarlock/custom-select-lib

JavaScript library for custom HTML <select>

custom-select

JavaScript library for custom HTML <select>. No dependencies needed.

Install

In HTML with the script tag:

file path:

build/assets/js/custom-select.js

<script src="custom-select.js" type="text/javascript"></script>

and:

file path:

 build/assets/css/custom-select.css

<link rel="stylesheet" href="custom-select.css">

Example

build/index.html 

How it works

Start with a simple HTML <select>:

<select class="my-select-element">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

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

The additional settings is:

{
    containerClass: '',
    selectValueClass: '',
    headClass: '',
    optionsClass: '',
}

Methods

getValue() method

get selected value

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

setValue() method

set value

const customSelect = new CustomSelect('.custom-select-element');
const selectedValue = customSelect.setValue('1');

Events

onChange

const customSelect = new CustomSelect('.custom-select-element');
customSelect.onChange( (data) => {
    console.log('onChange', data);
})