In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > add (select)

add method (select)

Browser support:

Inserts an option element before the specified option element in the options collection of the current select element.

If you want to insert an option element at a specified position, use the add method of the options collection of the current select element.

Another way to insert an element before another element is to use the insertBefore method. Example 2 demonstrates that.

To remove an option element, use the remove or removeChild method.

Syntax:

object.add (element, beforeElement);

You can find the related objects in the Supported by objects section below.

Parameters:

element

Required. Reference to the option element to add.

beforeElement

Required in Firefox, optional in Internet Explorer, Opera, Google Chrome and Safari. Reference to an option element in the options collection before which the option specified by the element parameter needs to be inserted. If the beforeElement parameter is not specified, the add method inserts the option element at the end of the options collection.

This parameter can also be an integer in Internet Explorer and Opera. In that case, it specifies the position of the insertion. In Internet Explorer before version 8, the beforeElement parameter must be an integer.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the add method:

<head>
    <script type="text/javascript">
        function InsertOption () {
            var selectTag = document.getElementById ("mySelect");
            var option = document.createElement ("option");
            option.text = "second";
            try {
                    // raises an exception in Internet Explorer earlier than version 8
                selectTag.add (option, selectTag.options[1]);
            }
            catch (e) {
                selectTag.add (option, 1);
            }
        }
    </script>
</head>
<body>
    <select id="mySelect" size="5">
        <option>first</option>
        <option>third</option>
    </select>
    <button onclick="InsertOption ()">Insert an option</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is equivalent to the previous one, but it uses the insertBefore method for the implementation:

<head>
    <script type="text/javascript">
        function InsertOption () {
            var selectTag = document.getElementById ("mySelect");
            var option = document.createElement ("option");
            selectTag.insertBefore (option, selectTag.options[1]);
                // must be after the insertBefore in Internet Explorer !!!
            option.text = "second";
        }
    </script>
</head>
<body>
    <select id="mySelect" size="5">
        <option>first</option>
        <option>third</option>
    </select>
    <button onclick="InsertOption ()">Insert an option</button>
</body>