上下文:我有一个从MySQL检索的500多个股票的列表，但是当我选择一个股票时，我只能获得最后一个股票的值(这是TWTR)而不是选择的值。这样做的目的是将数据传递给一个对象数组，其中x是股票代码名称
HTML:
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none; text-align: center;" list="brow">
<datalist id="brow">
<select name="selectStock" class="selectStock" id="selectStock">
<option></option>
</select>
</datalist>
<input class="button1" onclick=" send();" value="Add Stock"></input>
<!-- <input class="button1" type="submit" name="submit" id="submit" onclick="send();"></input> -->
</form>
Javascript:
var select = document.getElementById("selectStock");
var options = <?php echo json_encode($tickerArray) ?>;
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.innerHTML = opt;
el.value = opt;
select.appendChild(el);
}
var open = <?php echo json_encode($openPrices) ?>;
var selected = []
function send() {
selected = [
...selected,
{
"x": el.value, //The goal is to pass the tickers added/selected here, creating multiple objects inside of this array where each time adds a new stock, it gets added as a new object. As of now, I keep getting the last array which is TWTR
"y": 1.2
}
]
这是变量options(用户可以从中选择的列表)的数据结构:
var options = [["A"],["AAL"],["AAP"],["AAPL"],["ABBV"],["ABC"]...,["TWTR"]]
这是我按下Add Stock按钮3次时变量selected的数据结构:
[
{
"x": "TWTR",
"y": 1.2
},
{
"x": "TWTR",
"y": 1.2
},
{
"x": "TWTR",
"y": 1.2
}
]
非常欢迎任何帮助!
<!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>
<div class="row">
<div class="col">
<form>
<input style="background: rgba(255,255,255,0.5);border-radius: 10px; border: none; text-align: center;" list="brow">
<datalist id="brow">
<select name="selectStock" id="selectStock">
</select>
</datalist>
<input class="button1" onclick=" send();" value="Add Stock"></input>
</form>
</div>
</div>
</body>
<script>
var dropdown = document.getElementById("selectStock");
var options = [
["A"],
["AAL"],
["AAP"],
["AAPL"],
["ABBV"],
["ABC"],
["TWTR"]
];
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.innerHTML = opt;
el.value = opt;
dropdown.appendChild(el);
}
var selected = []
function send() {
console.log(dropdown.value)
console.log(selected)
selected.push({
x: dropdown.value,
y: 1.2,
});
}
</script>
</html>当你使用<datalist>时，你不使用<select>。数据表的值在关联的<input>.
在你的代码片段中，输入的样式使得用户不可能从中选择一些东西。
var dropdown = document.getElementById("selectStock");
var input = document.getElementById("brow");
var options = [
["A"],
["AAL"],
["AAP"],
["AAPL"],
["ABBV"],
["ABC"],
["TWTR"]
];
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.innerHTML = opt;
el.value = opt;
dropdown.appendChild(el);
}
var selected = []
function send() {
selected.push({
x: brow.value,
y: 1.2,
});
console.log(selected);
}<!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>
<div class="row">
<div class="col">
<form>
<input id="brow" list="selectStock">
<datalist id="selectStock">
</datalist>
<input class="button1" onclick=" send();" value="Add Stock"></input>
</form>
</div>
</div>
</body>
</html>