Question

我需要做的是有某种文本框形式，有人可以输入一个数字，根据这个数字，一个变量会将某些值乘以股票数量：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

因此，一旦用户输入数字并从每个下拉菜单中选择一个值，它就会并排提供结果以进行比较。我在编写插入文本框并将其链接到我的javascript代码时遇到问题，所以我非常感谢您的帮助。我也无法格式化代码，以便实际结果并排，所以我也非常感谢您的帮助。非常感谢!!

Answer 1

添加input并添加相应的keyup事件以监控更改。我在jQuery中写了一个例子。

＆＃13;

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 />");
  });
}

＆＃13;

.side {
  float:left;
}

＆＃13;

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

＆＃13;

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

1 个答案: