La tarea es restablecer el valor del elemento seleccionado a su valor predeterminado con la ayuda de jQuery. Hay dos enfoques que se analizan a continuación:
Enfoque 1: Primero seleccione las opciones usando los selectores de jQuery y luego use el método prop() para obtener acceso a sus propiedades. Si la propiedad está seleccionada, devuelva el valor predeterminado utilizando la propiedad defaultSelected .
- Ejemplo:
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Reset select value to
default with JQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"></p>
<select id="select">
<option value="GFG_1">GFG_1</option>
<option value="GFG_2" selected="selected">
GFG_2
</option>
<option value="GFG_3">GFG_3</option>
</select>
<button onclick="GFG_Fun()">
Click Here
</button>
<p id="GFG_DOWN"></p>
<script>
var el_up = document.getElementById('GFG_UP');
var el_down = document.getElementById('GFG_DOWN');
el_up.innerHTML = "Select a different option "
+ "and then click on the button to "
+ "perform the operation";
function GFG_Fun() {
$('#select option').prop('selected', function () {
return this.defaultSelected;
});
el_down.innerHTML = "Default selected";
}
</script>
</body>
</html>
- Producción:
Enfoque 2: Primero, seleccione las opciones usando los selectores de jQuery y luego use el método each() para obtener acceso a sus propiedades. Si la propiedad está seleccionada, devuelva el valor predeterminado por la propiedad defaultSelected .
- Ejemplo:
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Reset select value to
default with JQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"></p>
<select id="select">
<option value="GFG_1">GFG_1</option>
<option value="GFG_2" selected="selected">
GFG_2
</option>
<option value="GFG_3">GFG_3</option>
</select>
<button onclick="GFG_Fun()">
Click Here
</button>
<p id="GFG_DOWN"></p>
<script>
var el_up = document.getElementById('GFG_UP');
var el_down = document.getElementById('GFG_DOWN');
el_up.innerHTML = "Select a different option "
+ "and then click on the button to "
+ "perform the operation";
function GFG_Fun() {
$('#select option').each(function () {
if (this.defaultSelected) {
this.selected = true;
return false;
}
});
el_down.innerHTML = "Default selected";
}
</script>
</body>
</html>
- Producció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