Outputting data on a webpage based on Dropdown Menu/Form Value Inputs

问题

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>

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

回答1:

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>

来源：https://stackoverflow.com/questions/43357554/outputting-data-on-a-webpage-based-on-dropdown-menu-form-value-inputs

标签

javascript

jquery

html

textbox