Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Select add Method

  • Difficulty Level : Basic
  • 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>                                        


Output:
Before clicking the button:

After clicking the button:

Supported Browsers:

  • Apple Safari
  • Internet Explorer
  • Firefox
  • Google Chrome
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :