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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > label (optgroup)

label property (optgroup)

Browser support:

Sets or retrieves the text to show as the contents of the option group element.

The displayed text is unselectable in the drop-down list (select), it is useful for grouping the list items.

Syntax:

object.label;

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

This property is read/write.

HTML page for this property: label

Possible values:

String that sets or retrieves the label of the group.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the label attribute:

<select id="mySelect" size="8">
    <option selected="selected">None</option>
    <optgroup label="Fruits">
        <option />Apple
        <option />Pear
        <option />Peach
    </optgroup>
    <optgroup label="Vegetables">
        <option />Bean
        <option />Cole
    </optgroup>
</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 label property:

<head>
    <script type="text/javascript">
        function ChangeLabel () {
            var selectElem = document.getElementById ("mySelect");
            var groups = selectElem.getElementsByTagName ("optgroup");
            groups[0].label = newLabel.value;
        }
    </script>
</head>
<body>
    <select id="mySelect" size="8">
        <option selected="selected">None</option>
        <optgroup label="Fruits">
            <option />Apple
            <option />Pear
            <option />Peach
        </optgroup>
        <optgroup label="Vegetables">
            <option />Bean
            <option />Cole
        </optgroup>
    </select>

    <br />
    Type the new label for the first optgroup element
    <input id="newLabel" type="text" />
    <button onclick="ChangeLabel ();">Change label property!</button>
</body>