La tarea es cambiar el menú desplegable cuando se cambia la hora. Hay dos enfoques que se analizan a continuación.
Enfoque 1: utilice el método setTimeOut() y ejecute el código de cambio de menú después de un tiempo.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change dropdown
menu when time is changed?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1>
GeeksForGeeks
</h1>
<p id="GFG_UP"></p>
<select id="select">
<option value="1">GFG1</option>
<option value="2">GFG2</option>
<option value="3">GFG3</option>
<option value="4">GFG4</option>
<option value="5">GFG5</option>
</select>
<br><br>
<button>
Click here
</button>
<p id="GFG_DOWN" style="font-size: 23px;
font-weight: bold; color: green; ">
</p>
<script>
var elUp = document.getElementById("GFG_UP");
var elDown = document.getElementById("GFG_DOWN");
elUp.innerHTML = "Click on the button "
+ "to change the dropdown list "
+ "after 4 seconds";
$('button').click(function () {
setTimeout(
function () {
$("#select option[value=1]")
.text('GFG_N');
elDown.innerHTML
= "Drop-down menu changed";
}, 4000);
})
</script>
</body>
</html>
Producción:
Enfoque 2: use el método Date() para obtener el objeto DateTime actual y luego declare el otro objeto DateTime cada vez que se cambie el menú usando los métodos setSeconds() y getSeconds() .
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change dropdown
menu when time is changed?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1>
GeeksForGeeks
</h1>
<p id="GFG_UP">
</p>
<select id="select">
<option value="1">GFG1</option>
<option value="2">GFG2</option>
<option value="3">GFG3</option>
<option value="4">GFG4</option>
<option value="5">GFG5</option>
</select>
<br>
<br>
<button>
Click here
</button>
<p id="GFG_DOWN" style="font-size: 23px;
font-weight: bold; color: green; ">
</p>
<script>
var elUp = document.getElementById("GFG_UP");
var elDown = document.getElementById("GFG_DOWN");
elUp.innerHTML = "Click on the button to "
+ "change the dropdown list after "
+ "5 seconds of current time";
$('button').click(function () {
var d1 = new Date();
var d2 = new Date();
d2.setSeconds(d1.getSeconds() + 5);
setTimeout(
function () {
$("#select option[value=1]")
.text('GFG_N');
elDown.innerHTML
= "Drop-down menu changed";
}, d2 - d1);
})
</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