Mi maestro quiere que cree este programa con JavaScript y HTML donde los valores de la matriz se muestran en un menú desplegable, luego, cuando hago clic en un valor desplegable, muestra el valor desplegable en el que hice clic en un párrafo debajo del menú desplegable. . Ya he creado el menú desplegable con los valores de la matriz. (para mostrar los valores desplegables, primero debe hacer clic en el botón que dice "haga clic aquí")
¿Cómo puedo obtener un valor desplegable en el que hago clic para que se muestre debajo del menú desplegable?
Esto es lo que tengo:
var up = document.getElementById('geeks'); var down = document.getElementById('gfg'); var select = document.getElementById("arr"); var gr10 = ["Math 10", "Science 10", "Social 10", "English 10", "Math 20", "Computer Science 10", "Computer Technology 10", "Art 10"]; // Main function function GFG_Fun() { for (var i = 0; i < gr10.length; i++) { var optn = gr10[i]; var el = document.createElement("option"); el.textContent = optn; el.value = optn; select.appendChild(el); } down.innerHTML = "Elements Added"; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <p id="geeks"></p> <select id="arr"> <option value="1">Select Course</option> </select> <br> <br> <button onclick="GFG_Fun();"> Click Here </button> <br> <p id="gfg" ></p> <script src="script.js"></script> </body> </html>Bueno, plnkr simple: https://plnkr.co/edit/B0X1xV2JXnUWLaGu?preview
<script > var up = document.getElementById('geeks'); var down = document.getElementById('gfg'); var select = document.getElementById("arr"); select.addEventListener('input', e => down.innerText = e.target.value ) var gr10 = ["Math 10", "Science 10", "Social 10", "English 10", "Math 20", "Computer Science 10", "Computer Technology 10", "Art 10"]; // Main function function GFG_Fun() { for (var i = 0; i < gr10.length; i++) { var optn = gr10[i]; var el = document.createElement("option"); el.textContent = optn; el.value = optn; select.appendChild(el); } down.innerHTML = "Elements Added"; } </script>Lo resolví pero, en mi opinión, deberías haber intentado buscar respuestas primero o al menos darnos una idea de lo que has intentado hasta ahora. No estoy seguro, pero parece que le pediste a SO que hiciera tu tarea.
Solo agregué la siguiente parte para explicar rápidamente cómo se puede hacer. Es posible que desee modificarlo para obtener el resultado deseado.
// -------------------- GFG_Fun(); $('#arr').change(function() { var newText = $('#arr option:selected').val(); $('#gfg').append('<p>' + newText + '</p>') }); // --------------------Aquí está la solución de trabajo:
var up = document.getElementById('geeks'); var down = document.getElementById('gfg'); var select = document.getElementById("arr"); var gr10 = ["Math 10", "Science 10", "Social 10", "English 10", "Math 20", "Computer Science 10", "Computer Technology 10", "Art 10"]; // Main function function GFG_Fun() { for (var i = 0; i < gr10.length; i++) { var optn = gr10[i]; var el = document.createElement("option"); el.textContent = optn; el.value = optn; select.appendChild(el); } down.innerHTML = "Elements Added"; } // -------------------- GFG_Fun(); $('#arr').change(function() { var newText = $('#arr option:selected').val(); $('#gfg').append('<p>' + newText + '</p>') }); // -------------------- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <p id="geeks"> </p> <select id="arr"> <option value="1">Select Course</option> </select> <br><br> <button onclick="GFG_Fun();"> Click Here </button> <br> <p id="gfg"> </p> <script src="script.js"> </script> </body> </html>