0
192
VistasObtenga valor de una opción seleccionada en una lista dinámica recuperando datos de MySQL con PHP
Contexto: estoy tratando de crear una lista dinámica para que las opciones sean indicadores específicos disponibles en mi base de datos MySQL. La consulta está bien ya que puedo ver los datos cuando llamo a la variable y cuando hago console.log (desplegable) también puedo ver todas las opciones creadas (como se ve en la imagen). Sin embargo, cuando hago clic en un ticker determinado, solo obtengo los datos del primer elemento de esta matriz (que es "A"). Intenté usar un detector de eventos para obtener el valor del ticker que la persona está eligiendo, pero parece que esto no funciona.
Código mínimo reproducible:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="..." method = "post"> <input list="brow" id="name" name="name" placeholder="Enter a Stock" autocomplete="on" style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none; text-align: center;"> <datalist id="brow" name="brow"> <select id="selectStock" name="selectStock"> </select> </datalist> </body> <script> var dropdown = document.getElementById("selectStock"); //let options = <?php echo json_encode($tickerArray) ?>; //get data from MySQL tickers let options = [ ["A"], ["AAPL"], ["TSLA"], ["HOOD"] ] console.log(dropdown.value) for (var i = 0; i < options.length; i++) { var list = options[i]; //save every option as opt var opt = document.createElement("option"); opt.innerHTML = list; //change the HTML so that the newly added element for a select option is equal to the tickers in opt opt.value = list; //give the value of the element created as the ticker name dropdown.appendChild(opt); //append the latest element created to the select options } dropdown.addEventListener('change', function() { console.log('You selected: ', this.value); }); </script> </html>¿Qué podría hacer para que cuando el usuario presione una de las opciones creadas dinámicamente, pueda recuperar el valor de ese ticker elegido?
¡Gracias de antemano!
2 Respuestas
Responde la pregunta0
Puede verificarlo manualmente al cambiar. Pero debe verificar el cambio de la entrada de la lista de datos. En el navegador con la propiedad inputType en InputEvent, puede usar eso para filtrar cualquier evento onInput no deseado. Esto es "insertReplacementText" en Firefox 81 y nulo para Chrome/Edge 86. Si necesita admitir IE11, deberá validar que el valor sea válido.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="..." method="post" id="form"> <input list="brow" id="name" name="name" placeholder="Enter a Stock" autocomplete="on" style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none; text-align: center;"> <datalist id="brow" name="brow"> <select id="selectStock" name="selectStock"> <select id="sort"> </select> </select> </datalist> </body> <script> var dropdown = document.getElementById("selectStock"); //let options = <?php echo json_encode($tickerArray) ?>; //get data from MySQL tickers let options = [ ["A"], ["AAPL"], ["TSLA"], ["HOOD"] ] for (var i = 0; i < options.length; i++) { var list = options[i]; //save every option as opt var opt = document.createElement("option"); opt.innerHTML = list; //change the HTML so that the newly added element for a select option is equal to the tickers in opt opt.value = list; //give the value of the element created as the ticker name dropdown.appendChild(opt); //append the latest element created to the select options } document.getElementById("name") .addEventListener("input", function(event){ if(event.inputType == "insertReplacementText" || event.inputType == null) { console.log('You selected: ',event.target.value); event.target.value = ""; } }) </script> </html>0
Datalist no es una etiqueta html. Cámbielo a div. funciona entonces