Create a dynamic drop-down list in HTML using jQuery

Creating a dynamic drop-down list in HTML using jQuery involves updating the contents of a <select> element based on user interaction or other conditions. Here’s a step-by-step guide with an example:

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 with jQuery</title>
    <script src=""></script>
    <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>

jQuery Code

Now, let’s write the jQuery 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).ready(function() {
    const $selectElement = $('#dynamicSelect');
    const $addOptionButton = $('#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 = function() {
        if (optionIndex < newOptions.length) {
            const option = $('<option></option>').val(newOptions[optionIndex].value).text(newOptions[optionIndex].text);
        } else {
            alert('No more options to add');

    // Event listener for the button


  1. 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.
    • The jQuery library is included via a CDN link.
  2. jQuery Code:
    • $(document).ready(function() { ... });: Ensures the jQuery code runs after the DOM has fully loaded.
    • const $selectElement = $('#dynamicSelect');: Gets the reference to the drop-down list using jQuery.
    • const $addOptionButton = $('#addOptionButton');: Gets the reference to the button using jQuery.
    • 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 = function() { ... };: A function to add a new option to the drop-down list. It creates a new <option> element, sets its value and text, and appends it to the drop-down list. It then increments optionIndex.
    • $;: 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 jQuery 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 *