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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > multiple (keygen, select)

multiple property (keygen, select)

Browser support:

Sets or retrieves whether more than one item from a list can be selected.

The select element, or the selection list of the keygen element allows simple or multiple selection, depending on the state of the multiple property.

If multiple selection is allowed, the visual appearance of the selection list can only be a list box.
If only one selected element is allowed, the selection list may be a drop-down list or a list box. The default appearance is the drop-down list in that case.

You can set the count of the visible rows in a selection list with the size property.

If the value of the size property is greater than one, the appearance of the selection list is a list box.

In a non-empty drop-down list always exactly one selected element exists. If there is no element selected by default in a drop-down list, the first option will be selected.

In a single-selection list box the count of the selected items can be 0 (if the list box does not have a selected element by default) or 1.

In a multiple-selection list box the count of the selected items can be from 0 to the number of the items.

You can set the element(s) selected by default with the SELECTED attribute.

If only one selected element is allowed in the selection list, the selectedIndex property contains the index of the selected item in the options collection of the tag. If you need the value of the selected option in a single-selection list, you can use the value property of the select element.
If multiple selection is allowed, you can get the selected elements by iterating through the options collection of the tag and check the value of the selected property of every option tag.
If there is no selected element, the value of the selectedIndex property is -1.

If you want to use the selection list in an form element and you want to submit data that belongs to the selection list with the form, see the page for the select element, you can find detailed technical information there.

Syntax:

object.multiple;

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

This property is read/write.

HTML page for this property: MULTIPLE

Possible values:

Boolean that indicates whether multiple selection is allowed.

One of the following values:

false

Default. Multiple selection is disabled.

true

Multiple selection is enabled.

Default: false.

Example HTML code 1:

This example illustrates the use of the MULTIPLE attribute:

Hold down the CTRL key to select more than one element.<br /><br />
<select id="mySelect" multiple="multiple" size="7">
    <option selected="selected" />Component_1</option>
    <option />Component_2</option>
    <option />Component_3</option>
    <option />Component_4</option>
    <option />Component_5</option>
    <option />Component_6</option>
    <option />Component_7</option>
</select>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the multiple property:

<head>
    <script type="text/javascript">
        function ToggleMultiSel (buttonElem) {
            var select = document.getElementById ("mySelect");

            buttonElem.innerHTML = (select.multiple)? "Enable multiple selection!" : "Disable multiple selection!";
            select.multiple = !select.multiple;
        }
    </script>
</head>
<body>
    Hold down the CTRL key to select more than one element.
    <select id="mySelect" multiple="multiple" size="7">
        <option selected="selected" />Component_1</option>
        <option />Component_2</option>
        <option />Component_3</option>
        <option />Component_4</option>
        <option />Component_5</option>
        <option />Component_6</option>
        <option />Component_7</option>
    </select>

    <button onclick="ToggleMultiSel (this);">Disable multiple selection!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example displays the text of the selected items in a multiple-selection list:

<head>
    <script type="text/javascript">
        function GetSelected (selectTag) {
            var selIndexes = "";

            for (var i = 0; i < selectTag.options.length; i++) {
                var optionTag = selectTag.options[i];
                if (optionTag.selected) {
                    if (selIndexes.length > 0)
                        selIndexes += ", ";
                    selIndexes += optionTag.text;
                }
            }

            var info = document.getElementById ("info");
            if (selIndexes.length > 0) {
                info.innerHTML = "Selected options: " + selIndexes;
            }
            else {
                info.innerHTML = "There is no selected option";
            }
        }
    </script>
</head>
<body>
    Please select some options (use the CTRL key for multiple selection)
    <br />
    <select multiple="multiple" onchange="GetSelected (this);">
        <option>Apple</option>
        <option>Peach</option>
        <option>Pear</option>
    </select>
    <br /><br />

    <span id="info" style="border:1px solid #606060; background-color:#e0d0e0;"></span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example is similar to the previous one but it displays the value of the selected items in a multiple-selection list:

<head>
    <script type="text/javascript">
        function GetSelected (selectTag) {
            var selIndexes = "";

            for (var i = 0; i < selectTag.options.length; i++) {
                var optionTag = selectTag.options[i];
                if (optionTag.selected) {
                    if (selIndexes.length > 0)
                        selIndexes += ", ";
                    selIndexes += optionTag.value;
                }
            }

            var info = document.getElementById ("info");
            if (selIndexes.length > 0) {
                info.innerHTML = "Selected options: " + selIndexes;
            }
            else {
                info.innerHTML = "There is no selected option";
            }
        }
    </script>
</head>
<body>
    Please select some options (use the CTRL key for multiple selection)
    <br />
    <select multiple="multiple" onchange="GetSelected (this);">
        <option value="Apple">Apple</option>
        <option value="Peach">Peach</option>
        <option value="Pear">Pear</option>
    </select>
    <br /><br />

    <span id="info" style="border:1px solid #606060; background-color:#e0d0e0;"></span>
</body>