How to get the text of option tag by value using JavaScript ?

0 0 1 minute read

The HTML document contains some option elements and the task is to get the text of options of the select elements by using its value with the help of JavaScript.

There are two approaches that are discussed below:

Using value Property
Using Object.values() Method

Method 1: Using value Property

First, select the options by JavaScript selector, and then use value Property (eg. option[i].value) to compare the values of the option element. If it’s a match then use text Property (eg. option[i].text) to get the text of the option element.

Example: This example shows the use of the above-explained approach.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Get text of option tag by
        value using pure JavaScript
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
        zambiatek
    </h1>
 
    <h3>
        Get text of option tag by
        value using JavaScript
    </h3>
 
    <select id='GFG_list'>
        <option value='GFG_1'>GFG_A</option>
        <option value='GFG_2'>GFG_B</option>
        <option value='GFG_3'>GFG_C</option>
    </select>
 
    <br><br>
 
    <button onclick="getText()">
        Get Text by Value
    </button>
 
    <p id="GFG"></p>
 
    <script>
        let el = document.getElementById("GFG");
     
        let val = "GFG_2";
 
        function getText() {
            let a = document.getElementById("GFG_list");
            for (let i = 0; i < a.length; i++) {
                let option = a.options[i];
                if (option.value == val) {
                    el.innerHTML = option.text;
                }
            }
        }
    </script>
</body>
 
</html>

Output:

Method 2: Using Object.values() Method

In this example, we can look for every option element and matches the specific value of an element. We are using the Object.values() method to get the values of the option element. Then apply the forEach() method on each option and alert the values along with their text.

Example: This example shows the use of the above-explained approach.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Get text of option tag by
        value using pure JavaScript
    </title>
</head>
 
<body style="text-align:center;">
 
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
 
    <p>
        Click on the button to
        get the text of options
    </p>
 
    <select id='GFG_list'>
        <option value='GFG_1'>GFG_A</option>
        <option value='GFG_2'>GFG_B</option>
        <option value='GFG_3'>GFG_C</option>
    </select>
    <br><br>
 
    <button id="GFG_Button" onclick="getText()">
        getText
    </button>
 
    <script>
        function getText() {
            Object.values(document.getElementById(
                'GFG_list').options).
                forEach(function (option) {
                    alert("Value - " + option.value
                        + ", Text - " + option.text);
                });
        }
    </script>
</body>
 
</html>