HTML | DOM Select add Method

Last Updated : 28 Mar, 2019

The Select add() method is used for adding an option in a drop-down list. The Select add() method accepts the index number as a parameter for adding the new option in the desired position.

Syntax:

selectObject.add(option, index)

Property Values:

option: It is a mandatory parameter which is used to specify option or optgroup element.
index: It is an optional parameter which is used to specify the index position for the new option element.

Below program illustrates the Select add method :

1. Adding an “Interview Preparation” course at index position “1” of the drop-down list.

Input:

<!DOCTYPE html> 
<html> 
<head>  
        <title>Select add Method in HTML</title>  
        <style>  
            h1  
            {  
                color:green;  
            }  
            h2 
            { 
                font-family: Impact; 
            } 
            body  
            {  
                text-align:center;  
            } 
        </style>  
    </head> 
<body> 
   
<h1>GeeksforGeeks</h1>  
<h2>Select add Method</h2><br> 
  
Select your preferred course from the drop-down list:<br> 
  
<select id="myCourses" size="8"> 
  <option value="C++">c++</option> 
  <option value="Placement">Placement</option> 
  <option value="Java">Java</option> 
  <option value="Python">Python</option> 
</select> 
  
<p>To add a course titled "Interview Preparation" in the  
dropdown list, double-click the "Add" button.</p> 
  
<button ondblclick="My_list()">Add</button> 
   
<script> 
   
function My_list()  
{ 
   var d = document.getElementById("myCourses"); 
   var option = document.createElement("option"); 
   option.text = "Interview"; 
   d.add(option, d[1]) 
} 
   
</script> 
   
</body> 
</html>                                         