Open In App

HTML DOM Option label Property

Last Updated : 01 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The HTML DOM Option label property is used to get or set the label attribute of an <option> element in a drop-down list (<select> element). The label property represents the text label associated with the option, which is shown in the drop-down list.

Syntax:

It is used to return the label property.

optionObject.label

It is used to set the label property.

optionObject.label = "new label"

Return Value: It returns a string value which represent the shortest label for option element or in a drop-down list.

Example 1: The below example sets the Option label property.

html

</p><pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Option Label Example</title>
</head>
<body>
    <select id="mySelect">
        <option value="1" label="First Option">Option 1</option>
        <option value="2" label="Second Option">Option 2</option>
        <option value="3">Option 3</option> <!-- No label specified -->
    </select>

    <button onclick="setOptionLabel()">Set New Label for First Option</button>

    <p id="output"></p>

    <script>
        function setOptionLabel() {
            // Get the first option element
            let option = document.getElementById("mySelect").options[0];

            // Set a new label for the first option
            option.label = "Updated First Option";

            // Display the new label
            document.getElementById("output").textContent = 
"label updated first option to " + option.label;
        }
    </script>
</body>
</html>
</code></pre><p></p><p dir="ltr"><b><strong>Output:</strong></b></p><figure class="image"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20241001182543/updatedLabl.gif" alt="updatedLabl" width="495" height="218" srcset=""><figcaption>set label</figcaption></figure><p dir="ltr"><b><strong>Example 2: </strong></b><span>The below example get the Option label property. </span></p><p dir="ltr"><gfg-tabs data-run-ide="true" data-mode="light"><gfg-tab slot="tab">html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Option Label Example</title>
</head>

<body>
    <select id="mySelect">
        <option value="1" label="First Option">Option 1</option>
        <option value="2" label="Second Option">Option 2</option>
        <option value="3">Option 3</option> <!-- No label specified -->
    </select>

    <button onclick="getOptionLabel()">Get Label of First Option</button>

    <p id="output"></p>

    <script>
        function getOptionLabel() {
            // Get the first option element
            let option = document.getElementById("mySelect").options[0];

            // Get the label of the first option
            let label = option.label;

            // Display the label
            document.getElementById("output").textContent =
            "Label of first option: " + label;
        }
    </script>
</body>

</html>

Output:

updatedLabl
get label

Supported Browsers:

The browser supported by DOM Option label property are listed below:

  • Google Chrome
  • Firefox
  • Opera
  • Safari

Practice Tags :

Similar Reads