Simple select with event listeners | AvalynxSelect Example

Back

Create a simple select with AvalynxSelect and add events.

Events:

onChange: Triggered when the selected value changes.
onLoaded: Triggered when the select is loaded.

To see the events in action, open the console and select a value.

Event-Log:

Select loaded

Source of exampleCopy to clipboard


document.addEventListener("DOMContentLoaded", function () {
    new AvalynxSelect(".avalynx-select", {
        liveSearch: true,
        scrollList: true,
        scrollItems: 5,
        onChange: (value) => {
            logEvent('Selected value: ' + value);
        },
        onLoaded: () => {
            logEvent('Select loaded');
        }
    });

    function logEvent(message) {
        const logList = document.getElementById("event-log");
        const newItem = document.createElement("li");
        newItem.textContent = message;
        logList.appendChild(newItem);
    }
});

AvalynxSelect on GitHub Avalynx on GitHub