我需要做的是某种文本框形式，有人可以在其中输入一个数字，并且根据这个数字，变量将某些值乘以股票数量:
var stocks = [
['Apple', 141.63, 144.77, 90.34],
['Microsoft', 65.48, 65.78, 48.43]
];
var select = document.getElementById("selectStock");
select.onchange = (e) => {
let index = stocks.indexOf(stocks.find(a => a.indexOf(e.target.value) > -1));
document.getElementById("result").innerText =
("$" + Math.round(stocks[index][1] * 100) / 100 + " per share \n") +
("$" + Math.round(stocks[index][2] * 100) / 100 + " year high \n") +
("$" + Math.round(stocks[index][3] * 100) / 100 + " year low \n")
};
for (var i = 0; i < stocks.length; i++) {
var opt = stocks[i][0];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
var select = document.getElementById("selectStock1");
select.onchange = (e) => {
let index = stocks.indexOf(stocks.find(a => a.indexOf(e.target.value) > -1));
document.getElementById("result1").innerText =
("$" + Math.round(stocks[index][1] * 100) / 100 + " per share \n") +
("$" + Math.round(stocks[index][2] * 100) / 100 + " year high \n") +
("$" + Math.round(stocks[index][3] * 100) / 100 + " year low \n")
};
for (var i = 0; i < stocks.length; i++) {
var opt = stocks[i][0];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="display:block;">
<select id="selectStock">
<option>Pick a stock!</option>
<br>
<br>
<div id="result"></div>
</select>
<select id="selectStock1">
<option>Pick a stock!</option>
</select>
<br>
<br>
<div id="result"></div>
<br>
<br>
<div id="result1"></div>
</div>
</body>因此，一旦用户输入数字并从每个下拉菜单中选择一个值，它就会并排提供结果以进行比较。我在编写插入文本框并将其链接到我的 javascript 代码的代码时遇到困难，所以我非常感谢对此的帮助。我在格式化代码时也遇到了麻烦，以便实际结果并排显示，因此我也非常感谢对此的帮助。非常感谢!!
最佳答案
添加一个input，并添加相应的keyup事件来监视更改。我用 jQuery 写了一个例子。
var stocks = [
['Apple', 141.63, 144.77, 90.34],
['Microsoft', 65.48, 65.78, 48.43]
];
$(".selectStock").each(function (){
for (var i = 0, len = stocks.length; i < len; i++) {
$("<option>").html(stocks[i][0]).attr("value", i).appendTo(this);
}
});
function r2d (i) {
return Math.round(i * 100) / 100
}
$(".selectStock").change(updateAmount);
$("#numberOfStocks").on('keyup', updateAmount);
function updateAmount() {
$(".selectStock").each(function () {
index = Number($(this).val());
if (isNaN(index)) {
return;
}
amt = Number($("#numberOfStocks").val());
if (isNaN(amt) || amt == 0) {
amt = 1;
}
$(this).nextAll(".result:first").html("")
.append("$" + r2d(amt*stocks[index][1]) + " per share<br />")
.append("$" + r2d(amt*stocks[index][2]) + " high year<br />")
.append("$" + r2d(amt*stocks[index][3]) + " low year<br />");
});
}.side {
float:left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<input value="1" type="text" id="numberOfStocks" />
<div style="display:block;">
<div class="side">
<select class="selectStock">
<option>Pick a stock!</option>
</select>
<br>
<br>
<div class="result"></div>
</div>
<div class="side">
<select class="selectStock">
<option>Pick a stock!</option>
</select>
<br>
<br>
<div class="result"></div>
</div>
</div>
</body>关于javascript - 根据下拉菜单/表单值输入在网页上输出数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43357554/