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

本文介绍了根据下拉菜单/表单值输入在网页上输出数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

What I need to do is have some sort of textbox form where someone can input a number, and based on this number a variable will multiply certain values by the number of shares:

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

So once the user inputs the number and selects a value from each dropdown menu, it provides the results side by side for comparison. I'm having trouble coming up with the code to insert a textbox and link it to my javascript code, so I'd really appreciate help on this. I'm also having trouble formatting the code so that the actual results are side by side, so I'd also appreciate help on this as well. Much appreciated!!

推荐答案

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

Add an input and also add the corresponding keyup event to monitor for changes. I wrote up an example in 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>

这篇关于根据下拉菜单/表单值输入在网页上输出数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！