JavaScript 如何根据值获取选项标签的文本

HTML文档包含一些选项元素，任务是使用JavaScript通过其值来获取选择元素的选项文本。

下面讨论了两种方法：

使用value属性
使用Object.values()方法

方法1：使用value属性

首先，使用JavaScript选择器选择选项，然后使用value属性（例如option[i].value）比较选项元素的值。如果匹配，则使用text属性（例如option[i].text）获取选项元素的文本。

示例： 此示例演示了上述方法的使用。

<!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>

输出:

JavaScript 如何根据值获取选项标签的文本

方法2：使用Object.values() 方法

在这个示例中，我们可以查找每个选项元素，并匹配元素的特定值。我们使用Object.values()方法来获取选项元素的值。然后在每个选项上应用forEach()方法，并将值与文本一起弹出。

示例： 此示例展示了上述方法的使用。

<!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>

输出：

JavaScript 如何根据值获取选项标签的文本