How to use HTML DOM Select add in JavaScript

In this article i am going to explain about HTML DOM select object add method.
  • 2187

HTML DOM  Select add  method

The DOM select add method is used to add an option to a dropdown list.

Syntax of  select add method

selectobject.add(option,before)


Browser support

The select add method  is supported in all major browser.


Parameters in select add method

It have two parameters:

  • option

    It is used to add a option.
     

  • before

    Where you want to insert a new option.

Example of select add method

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

    function Result() {

        var x = document.getElementById("SelectVal");

        var option = document.createElement("option");

        option.text = "New Item";

        try {

            x.add(option, x.options[null]);

        }

        catch (e) {

            x.add(option, null);

        }

    }

</script>

</head>

<body>

 

<form>

<select id="SelectVal">

  <option>One</option>

  <option>Two</option>

  <option>Three</option>

  <option>Four</option>

</select>

</form>

<br />

<br />

<br />

<br />

<br />

<button type="button" onclick="Result()">Insert option</button>

</body>

</html>

Output:

Before clicking button output is:

before clicking select add new meth.jpg

After clicking button output is:

after clicking select add new method.jpg

You may also want to read these related articles :here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.