根据下拉菜单/表单值输入在网页上输出数据

Question

我需要做的是使用某种文本框形式，有人可以输入数字，并且基于此数字，变量会将某些值乘以份额数：

 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代码的代码时遇到了麻烦，因此，我非常感谢您的帮助。 我在格式化代码时也遇到了麻烦，因此实际结果并排，因此我也希望在此方面有所帮助。 非常感激！！

Answer 1

添加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>

根据下拉菜单/表单值输入在网页上输出数据

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-04-12 00:39:29

根据下拉菜单/表单值输入在网页上输出数据

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-04-12 00:39:29

解决方案1
2 已采纳 2017-04-12 00:39:29