Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

To get the text of the option tag by value using JavaScript, we have multiple approaches. we are going to learn how to get the text of the option tag by value using JavaScript.

These are the following approaches that are discussed below:

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;">
        GeeksforGeeks
    </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>

                    

Output: 

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

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

Method 3: Using selectedIndex Property

The selectedIndex property is a property of the <select> element in HTML, and it is used in JavaScript to get or set the index of the currently selected option in the dropdown list. The index is a zero-based integer indicating the position of the selected option among the <select> element’s options.

Example: In this modified code, the selectedIndex property is used to get the index of the selected option, and then options[selectedIndex] is used to access the selected option. The value and text properties of the selected option are then used to display the value and text in an alert.

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() {
            const selectedIndex = document.getElementById('GFG_list').selectedIndex;
            const selectedOption = document.getElementById('GFG_list').options[selectedIndex];
 
            alert("Value - " + selectedOption.value + ", Text - " + selectedOption.text);
        }
    </script>
</body>
 
</html>

                    

Output:




Last Updated : 16 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads