How to create a dynamic drop-down list in JavaScript?

Creating a dynamic drop-down list in JavaScript allows you to update the options in a <select> element based on user interactions or other conditions. This can enhance the user experience by providing relevant options without needing to reload the page. In this guide, we’ll walk through a simple example that demonstrates how to add new options to a drop-down list using JavaScript.

HTML Structure

First, let’s set up a basic HTML structure with a <select> element and a button to add new options to the drop-down list:

<!DOCTYPE html>
    <title>Dynamic Drop-Down List</title>
    <h1>Dynamic Drop-Down List Example</h1>
    <label for="dynamicSelect">Choose an option:</label>
    <select id="dynamicSelect">
        <option value="default" disabled selected>Select an option</option>
    <button id="addOptionButton">Add Option</button>

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

JavaScript Code

Now, let’s write the JavaScript code to handle the dynamic addition of options to the drop-down list. We’ll include this code in a separate file named script.js.

document.addEventListener('DOMContentLoaded', (event) => {
    const selectElement = document.getElementById('dynamicSelect');
    const addOptionButton = document.getElementById('addOptionButton');

    // Array of new options to be added dynamically
    const newOptions = [
        { value: 'option1', text: 'Option 1' },
        { value: 'option2', text: 'Option 2' },
        { value: 'option3', text: 'Option 3' },

    let optionIndex = 0;

    // Function to add a new option to the drop-down list
    const addOption = () => {
        if (optionIndex < newOptions.length) {
            const option = document.createElement('option');
            option.value = newOptions[optionIndex].value;
            option.text = newOptions[optionIndex].text;
        } else {
            alert('No more options to add');

    // Event listener for the button
    addOptionButton.addEventListener('click', addOption);


HTML Setup:

  • The <select> element with the id dynamicSelect is the drop-down list.
  • The <button> element with the id addOptionButton is used to trigger the addition of new options.

JavaScript Code:

  • document.addEventListener('DOMContentLoaded', (event) => { ... });: Ensures the JavaScript code runs after the DOM has fully loaded.
  • const selectElement = document.getElementById('dynamicSelect');: Gets the reference to the drop-down list.
  • const addOptionButton = document.getElementById('addOptionButton');: Gets the reference to the button.
  • const newOptions = [ ... ];: An array of new options that will be added to the drop-down list.
  • let optionIndex = 0;: Keeps track of the current index in the newOptions array.
  • const addOption = () => { ... };: A function to add a new option to the drop-down list. It creates a new <option> element, sets its value and text, and adds it to the drop-down list. It then increments optionIndex.
  • addOptionButton.addEventListener('click', addOption);: Adds an event listener to the button so that when it is clicked, the addOption function is called.


This example demonstrates how to create a dynamic drop-down list using JavaScript by adding new options based on user interaction.

Share with friends

Leave a Comment

Your email address will not be published. Required fields are marked *