背景關系：我正在嘗試創建一個動態串列，以便選項是我的 MySQL 資料庫中可用的特定代碼。查詢很好，因為我可以在呼叫變數時看到資料，在執行 console.log(dropdown) 時，我還可以看到創建的所有選項（如圖所示）。然而，當我點擊一個給定的股票代碼時，我只能得到這個陣列中第一個元素的資料（即“A”）。我嘗試使用事件偵聽器來獲取該人選擇的股票代碼的值，但這似乎不起作用。
最小的可重現代碼：
<!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>我該怎么做才能在用戶按下動態創建的選項之一時，檢索所選代碼的值？
先感謝您！
uj5u.com熱心網友回復：
您可以在更改時手動檢查它。但是你需要檢查datalist輸入的變化。在 InputEvent 上具有 inputType 屬性的瀏覽器中，您可以使用它來過濾掉任何不需要的 onInput 事件。這是 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>uj5u.com熱心網友回復：
Datalist 不是 html 標簽。將其更改為 div。然后它作業
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/338722.html
標籤：javascript html
下一篇：單擊按鈕時如何運行JS代碼