El documento HTML que contiene algunos elementos de opción y la tarea es obtener el texto de las opciones del elemento seleccionado utilizando su valor con la ayuda de JavaScript. Hay dos enfoques que se analizan a continuación:
Enfoque 1: primero, seleccione las opciones mediante el selector de JavaScript, utilice la propiedad de valor (p. ej., opción[i].valor) para comparar los valores del elemento de opción. Si es una coincidencia, use la propiedad de texto (por ejemplo, opción [i]. texto) para obtener el texto del elemento de opción.
Ejemplo:
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 id="GFG_UP"></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>
<p id="GFG_P"></p>
<script>
var el = document.getElementById("GFG_P");
var up = document.getElementById("GFG_UP");
var val = "GFG_2";
up.innerHTML = "Click on the button to get "
+ "the text of option with, Value - " + val;
function getText() {
var a = document.getElementById("GFG_list");
for (var i = 0; i < a.length; i++) {
var option = a.options[i];
if (option.value == val) {
el.innerHTML = option.text;
}
}
}
</script>
</body>
</html>
Producción:
Enfoque 2: En este ejemplo, podemos buscar cada elemento de opción y coincidencias con el valor específico del elemento. Estamos utilizando el método Object.values() para obtener los valores del elemento de opción. Luego aplique el método forEach() en cada opción y alerte los valores junto con su texto.
Ejemplo:
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 id="GFG_UP"></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>
var up = document.getElementById("GFG_UP");
up.innerHTML = "Click on the button to "
+ "get the text of options";
function getText() {
Object.values(document.getElementById(
'GFG_list').options).
forEach(function (option) {
alert("Value - " + option.value
+ ", Text - " + option.text);
});
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA