Dada una lista desplegable que contiene elementos de opciones y la tarea es obtener el primer elemento del elemento seleccionado usando JQuery.
Enfoque 1:
- Seleccione el primer elemento del elemento <select> usando el selector JQuery.
- Use la propiedad .prop() para obtener acceso a las propiedades de ese elemento en particular.
- Cambie la propiedad selectedIndex a 0 para obtener acceso al primer elemento. (El índice comienza con 0)
Ejemplo: Este ejemplo ilustra el enfoque discutido anteriormente.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
How to select first element in the
drop-down list using jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<select id = "select">
<option value="GFG1">GFG1</option>
<option value="GFG2">GFG2</option>
<option value="GFG3">GFG3</option>
<option value="GFG4">GFG4</option>
<option value="GFG5">GFG5</option>
</select>
<br><br>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"font-size: 23px; font-weight: bold; color: green; ">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to get the "
+ "first option's value using JQuery";
function gfg_Run() {
el_down.innerHTML =
$("#select").prop("selectedIndex", 0).val();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Seleccione el elemento <select> usando el selector JQuery.
- Este selector es más específico y selecciona el primer elemento usando option:nth-child(1) .
- Esto obtendrá acceso al primer elemento (el índice comienza con 1).
Ejemplo: Este ejemplo ilustra el enfoque discutido anteriormente.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
How to select first element in the
drop-down list using jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<select id = "select">
<option value="GFG1">GFG1</option>
<option value="GFG2">GFG2</option>
<option value="GFG3">GFG3</option>
<option value="GFG4">GFG4</option>
<option value="GFG5">GFG5</option>
</select>
<br><br>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"font-size: 23px; font-weight: bold; color: green; ">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to get the"
+ " first option's value using JQuery";
function gfg_Run() {
el_down.innerHTML =
$('#select option:nth-child(1)').val();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA