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