Create Custom Dropdown

Creating a Dynamic Drop-Down Menu in HTML, JavaScript, and JSON

Drop-down menus are a common UI element used to allow users to select from a list of options. However, hardcoding these options isn’t always practical, especially when dealing with dynamic data sources. In this blog, we’ll learn how to create a dynamic drop-down menu using HTML, JavaScript, and JSON.

Why Use a Dynamic Drop-Down?

Flexibility: Easily update options without modifying the HTML.
Efficiency: Fetch data from external sources (e.g., APIs, databases, or JSON files).
Scalability: Handle large datasets without cluttering the code.

Step-by-Step Implementation Step 1: Set Up the HTML Structure Create a simple HTML file with a <select> element where the options will be dynamically inserted.


    
        <label for="dropdown">Choose an option: </label>
        <select id="dropdown"></select>

        <script src="script.js"></script>

Step 2: Create a JSON Data Source For demonstration, we'll use a JSON object containing a list of options.


const data = [
    { "id": 1, "name": "Apple" },
    { "id": 2, "name": "Banana" },
    { "id": 3, "name": "Cherry" },
    { "id": 4, "name": "Date" }
];

Step 3: Populate the Drop-Down Using JavaScript Now, create a script.js file to dynamically populate the drop-down list with the JSON data.


document.addEventListener("DOMContentLoaded", function () {
    const dropdown = document.getElementById("dropdown");

    const data = [
        { id: 1, name: "Apple" },
        { id: 2, name: "Banana" },
        { id: 3, name: "Cherry" },
        { id: 4, name: "Date" }
    ];

    // Populate the drop-down
    data.forEach(item => {
        let option = document.createElement("option");
        option.value = item.id;
        option.textContent = item.name;
        dropdown.appendChild(option);
    });
});

Step 4: Fetch Data from an External JSON File (Optional) Instead of hardcoding data, fetch it dynamically from an external JSON file. Create a data.json file:


[
    { "id": 1, "name": "Apple" },
    { "id": 2, "name": "Banana" },
    { "id": 3, "name": "Cherry" },
    { "id": 4, "name": "Date" }
]

//Modify script.js to fetch data from data.json:

document.addEventListener("DOMContentLoaded", function () {
    const dropdown = document.getElementById("dropdown");

    fetch("data.json")
        .then(response => response.json())
        .then(data => {
            data.forEach(item => {
                let option = document.createElement("option");
                option.value = item.id;
                option.textContent = item.name;
                dropdown.appendChild(option);
            });
        })
        .catch(error => console.error("Error fetching data:", error));
});

Conclusion

In this blog, we created a dynamic drop-down menu using HTML, JavaScript, and JSON. We also explored fetching data from an external JSON file, making the menu flexible and scalable. This technique is widely used in applications that require dynamic data rendering, such as forms, filtering options, and category selections. Try implementing this approach in your project and enhance the user experience with dynamic content loading!