Home

EZ Select Menu Creator

Getting Started

Follow these simple steps to add the EZComponents select menu creator to your project:

Add the scripts to your HTML:

<script src="https://cdn.jsdelivr.net/gh/Botman64/EZComponents@main/componentsselectMenu.js"></script>


<script src="https://cdn.jsdelivr.net/gh/Botman64/EZComponents@main/componentsselectMenuCreator.js"></script>
Initialize the select menu creator:
// Create a select menu creator
const selectCreator = new EZSelectMenuCreator(
    document.getElementById('creator-container'),
    {
        initialData: {
            placeholder: 'Select an option',
            options: [
                {
                    label: 'Option One',
                    value: 'option1',
                    description: 'First option description',
                    emoji: '1️⃣'
                }
            ]
        }
    }
);

// Initialize the creator
selectCreator.init();

// Listen for updates
selectCreator.on('update', (data) => {
    console.log('Select menu updated:', data);
});

Interactive Creator

Event Log

// Events will appear here

JSON Output

// JSON will appear here

Implementation Code

// Initialize the Select Menu Creator
const selectCreator = new EZSelectMenuCreator(
    document.getElementById('creator-container'),
    {
        initialData: {
            placeholder: 'Select an item',
            options: [
                {
                    label: 'First Option',
                    value: 'first',
                    description: 'Description for first option',
                    emoji: '1️⃣'
                }
            ]
        }
    }
);

// Initialize the creator
selectCreator.init();

// Listen for updates
selectCreator.on('update', (changedData) => {
    console.log('Select menu updated:', changedData);

    // You can use the changed data to update your application
    // or synchronize with other components
});

// Get the full data object
const currentData = selectCreator.getData();

// Set new data programmatically
selectCreator.setData({
    placeholder: 'Choose a role',
    options: [
        {
            label: 'Admin',
            value: 'admin',
            description: 'Full access to all settings',
            emoji: '👑'
        },
        {
            label: 'Moderator',
            value: 'mod',
            description: 'Can manage users and content',
            emoji: '🛡️'
        }
    ]
});

// Export to JSON (useful for saving to database)
const jsonData = selectCreator.toJSON();

// Create a working select menu from the creator data
const selectMenu = new EZSelectMenu(
    document.getElementById('select-container'),
    selectCreator.getData()
);
selectMenu.render();