从使用 PHP 从 MySQL 检索数据的动态列表中的选定选项中获取值
[英]Get value from a selected option in a dynamic list retrieving data from MySQL with PHP
问题描述
Context: I'm trying to create a dynamic list so that the options are specific tickers available in my MySQL database.
上下文：我正在尝试创建一个动态列表，以便选项是我的 MySQL 数据库中可用的特定代码。 The query is fine since I can see the data when calling the variable and when doing console.log(dropdown) I can also see all the options created (as seen in the picture).查询很好，因为我可以在调用变量时看到数据，并且在执行 console.log(dropdown) 时我还可以看到创建的所有选项（如图所示）。 However, when I click on a given ticker, I only get the data for the first element on this array (which is "A").然而，当我点击一个给定的股票代码时，我只能得到这个数组中第一个元素的数据（即“A”）。 I've tried using a event listener to get the value of the ticker that the person is choosing, but this doesn't seem to be working.我尝试使用事件侦听器来获取该人选择的股票代码的值，但这似乎不起作用。
Minimal reproducible code:最小的可重现代码：
<!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>
What could I do so that when the user presses one of the dynamically created options, I can retrieve the value of that ticker chosen?我该怎么做才能在用户按下动态创建的选项之一时，检索所选代码的值？
Thank you in advance!先感谢您！
2 个解决方案
解决方案1
1 已采纳 2021-10-27 16:33:22
You can manually check it on change.您可以在更改时手动检查它。 But you need to check change of the input of datalist.但是你需要检查datalist输入的变化。 In browser with the inputType property on the InputEvent you can use that to filter out any unwanted onInput events.在具有 InputEvent 上的 inputType 属性的浏览器中，您可以使用它来过滤掉任何不需要的 onInput 事件。 This is "insertReplacementText" on Firefox 81 and null for Chrome/Edge 86. If you need to support IE11 you will need to validate the value is valid.这是 Firefox 81 上的“insertReplacementText”，Chrome/Edge 86 上为 null。如果您需要支持 IE11，则需要验证该值是否有效。
<!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>
解决方案2
0 2021-10-27 16:32:45
Datalist is not an html tag. Datalist 不是 html 标签。 Change it to div.将其更改为 div。 It works then然后它工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.