Skip to main content

JavaScript

How to use the JavaScript library.

Initializing​

There are two ways to initialize the multiple select elements.

Initialize All​

The InitializeAllMultiSelects function looks for every multiple select element on the page and initializes them. If the multiple select has already been initialized, it will be skipped.

InitializeAllMultiSelects();

Initialize Single​

The MultiSelect class can be used to initialize a single multiple select element. The constructor takes the native select element as a parameter.

const multiSelect = new MultiSelect(document.getElementById("demo"));

Getting Selected Values​

There are two ways to get the selected values from the multiple select.

Registering a Callback​

The MultiSelect class has a registerOnChangeCallback function that can be used to register a callback function that will be called when the selected values change.

It passes the multiple select id and the selected values to the callback function.

const multiSelect = new MultiSelect(document.getElementById("demo"));
multiSelect.registerOnChangeCallback((multiSelectId, values) => {
  console.log(values);
});

Getting the Values​

The MultiSelect class has a selectedValues get function that can be used to get the selected values.

const multiSelect = new MultiSelect(document.getElementById("demo"));
const values = multiSelect.selectedValues;
console.log(values);