How to add options to a drop-down list using jQuery?

How to add options to a drop-down list using jQuery?

Last Updated : 22 Jan, 2021

Given an HTML document with a drop-down list menu and our task is to add more options to the drop-down list using jQuery.

Approach : To add more option to the existing drop-down list using the append() method :

 var options = {
                val1: 'C#',
                val2: 'PHP'
            };
            var selectOption = $('#programmingLanguage');
            $.each(options, function (val, text) {
                selectOption.append(
                    $('<option></option>').val(val).html(text)
                );
            });

This is a small code snippet that can be used to add an option to an existing list and this code snippet is taken from a demonstration below where val1 and val2 have the option names, programmingLanguage is the id used for the select option, then by using the append() method the new options are merged with the existing list of options.

A detailed explanation of the append() method in JQuery can be found here .

Below is the code for the demonstration of the above approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Add an option to the dropdown list using jquery.</title>
</head>

<body>
    <h1 style="color: green;">GeeksForGeeks</h1>
    
<p>Programming Languages :</p>

    <select id='programmingLanguage'>
        <option value="Java" style="color: green; 
                font-weight: 700;">Java</option>
        <option value="Python" style="color: green; 
                font-weight: 700;">Python</option>
        <option value="CPP" style="color: green; 
                font-weight: 700;">CPP</option>
        <option value="C" style="color: green; 
                font-weight: 700;">C</option>
    </select>
    
<p> Click to add C# and PHP programming languages</p>

    <button onclick="addOption()">Add option</button>
    <!--Code to add an option to an existing set of option using jquery-->
    <script>
        function addOption() {
            var options = {
                val1: 'C#',
                val2: 'PHP'
            };
            var selectOption = $('#programmingLanguage');
            $.each(options, function (val, text) {
                selectOption.append(
                    $('<option></option>').val(val).html(text)
                );
            });
        }
    </script>
</body>

</html>

Output:

How to add options to a drop-down list using jQuery?

S

sayantanbose2001

Improve

Article Tags :

Similar Reads

How to add options to a select element using jQuery?

We will dynamically add the options to the select element using jQuery. jQuery has a lot of in-built methods. But, we will use some of them to accomplish the purpose of dynamically adding the options to the select element as listed below:Table of ContentBy passing the HTML of the option tag to the a

How to change Selected Value of a Drop-Down List using jQuery?

We will change the default selected value of the dropdown using jQuery. In an HTML select tag, the default selected value is the value given to the first option tag. With jQuery, it is easy to change the selected value from a drop-down list. Below are the methods to change the selected value of a dr

How to get selected text from a drop-down list using jQuery?

In this article, we will learn how we can get the text of the selected option in a select tag using jQuery. There are two ways in jQuery that we can use to accomplish this task. Table of Content Using the val() method By using option:selected selector and text() method togehterUsing the val() method

How to select/deselect multiple options in dropdown using jQuery ?

To select and deselect multiple options in a drop-down menu, we will use the HTML and CSS codes. HTML code helps to define the basic structure of the webpage and CSS will benefit in designing the web page. Some essential properties used in the code are as follows- <div> - This is a division ta

How to define an option in a drop-down list in HTML5 ?

In this article, we will learn how to define an option in a drop-down list in HTML5. The <select> element is used to create a drop-down lists in HTML. This is generally used to present a list of options to the user in a form so that the user could choose one option as the needed one. The <o