Home

EZ Select Menu Component

Getting Started

Follow these simple steps to add EZComponents select menus to your project:

Add the script to your HTML:

<script src="https://cdn.jsdelivr.net/gh/Botman64/EZComponents@main/componentsselectMenu.js"></script>
Create your first select menu:
// Create a simple select menu
const mySelectMenu = new EZSelectMenu(
    document.getElementById('select-container'),
    {
        placeholder: 'Choose an option',
        options: [
            { value: 'option1', label: 'Option 1' },
            { value: 'option2', label: 'Option 2' },
            { value: 'option3', label: 'Option 3' }
        ],
        onChange: (value) => {
            console.log(`Selected: ${value}`);
        }
    }
);

// Render the select menu
mySelectMenu.render();

Basic Menu Examples

Simple Select Menu

Rich Select Menu

// Simple Select Menu Implementation
const simpleSelect = new EZSelectMenu(
    document.getElementById('container-element'),
    {
        placeholder: 'Choose an option',
        options: [
            { value: 'option1', label: 'Option 1' },
            { value: 'option2', label: 'Option 2' },
            { value: 'option3', label: 'Option 3' }
        ],
        onChange: (value) => {
            console.log(`Selected option: ${value}`);
        }
    }
);

// Render the select menu
simpleSelect.render();

// API Methods
simpleSelect.setValue('option2');   // Set a specific value
simpleSelect.getValue();            // Get current value
simpleSelect.open();                // Open the dropdown
simpleSelect.close();               // Close the dropdown
simpleSelect.toggle();              // Toggle dropdown open/closed
simpleSelect.disable();             // Disable the select menu
simpleSelect.enable();              // Enable the select menu

// Rich Select Menu With Emoji and Descriptions
const richSelect = new EZSelectMenu(
    document.getElementById('container-element'),
    {
        placeholder: 'Select your status',
        options: [
            {
                value: 'online',
                label: 'Online',
                description: 'Shows you as online',
                emoji: '🟢'
            },
            {
                value: 'idle',
                label: 'Idle',
                description: 'Shows you as away',
                emoji: '🟠'
            },
            {
                value: 'dnd',
                label: 'Do Not Disturb',
                description: 'Only urgent mentions',
                emoji: '🔴'
            },
            {
                value: 'invisible',
                label: 'Invisible',
                description: 'Appear offline to everyone',
                emoji: '⚪'
            }
        ],
        value: 'online',  // Pre-select a value
        disabled: false,  // Enable/disable the menu
        onChange: (value, selectMenu) => {
            console.log(`Status changed to: ${value}`);
        },
        onOpen: (selectMenu) => {
            console.log('Menu opened');
        },
        onClose: (selectMenu) => {
            console.log('Menu closed');
        }
    }
);

richSelect.render();