To programmatically inject options into a dropdown menu, you first need a target HTML element. The following snippet establishes a container with a specific identifier to be manipulated by the DOM API.

<select id="categoryDropdown" name="category">
    <option value="" disabled selected>-- Select Category --</option>
</select>

The source of the data can vary, but a structured array of objects provides flexibility for mapping display text to internal values. This example defines a dataset representing product categories.

const inventoryCategories = [
    { identifier: 'electronics', displayName: 'Consumer Electronics' },
    { identifier: 'apparel', displayName: 'Clothing & Apparel' },
    { identifier: 'home', displayName: 'Home & Garden' }
];

The core logic involves selecting the DOM element, clearing any existing entries to prevent duplication, and iterating over the dataset to create and append new option nodes. While document.createElement is a stanadrd approach, the Option constructor offers a concise syntax for setting both the value and the text label simultaneously.

function initializeDropdown(elementId, dataSet) {
    const targetElement = document.getElementById(elementId);

    if (!targetElement) {
        console.error(`Element with ID ${elementId} not found.`);
        return;
    }

    // Reset options
    targetElement.innerHTML = '';

    dataSet.forEach(entry => {
        // Create a new Option object (text, value)
        const optionNode = new Option(entry.displayName, entry.identifier);
        
        // Append the new option to the select element
        targetElement.add(optionNode);
    });
}

// Execute the population logic
initializeDropdown('categoryDropdown', inventoryCategories);