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

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.

Output: