当用户选择了 2 个单独的 HTML <select> 和 <option> 元素时，有没有办法执行 Javascript 函数？

Question

我是 Javascript 的新手，在选择两个单独的元素时很难执行函数。我正在尝试根据所选选项获得最终结果。我在一家物流公司工作，我只是想尝试一些东西来练习编码并帮助我的工作。请在下面查看我的代码，希望它对我要实现的目标有意义（根据 'Kit' 的尺寸找出需要的运输容器）。我想将 Javascript 保存在一个单独的文件中，因此请在回复时牢记这一点。

<!DOCTYPE HTML>
<html>
  <head>
    <title>Shipper Calculator</title>
    <link rel="stylesheet" href="Stylesheet.css">
    <script src="JavaScript.js" defer></script>
  </head>

<body>
  <header><div class="Heading"><h1>Shipper Calculator</h1></div><hr></header>
  <div class="Flex 1">
    <div class="CourierMenu">
      <select id="Courier">
        <option disabled="disabled" selected="selected">Courier</option>
        <option id="Marken">Marken</option>
        <option id="WorldCourier">World Courier</option>
        <option id="Quickstat">Quickstat</option>
        <option id="DHL">DHL</option>
      </select>
    <select id="Temperature">
      <option disabled="disabled" selected="selected">Temperature</option>
      <option id="ControlledAmbient_Refrigerated">15-25ºC / 2-8ºC</option>
      <option id="ControlleFrozen">-25ºC to -15º</option>
      <option id="DryIce">Dry Ice</option>
      <option id="Ambient">Ambient</option>
    </select>
  </div>

    <div class="DimsInput">
      <input id="Kits" placeholder="Kits (Quantity)">
      <input id="Length" placeholder="Length (mm)">
      <input id="Width" placeholder="Width (mm)">
      <input id="Height" placeholder="Height (mm)">
    </div>
    <input id="submit" type="submit">
  </div>
  <div class="result">
    <p class="req" >Shipper Required:</p>
    <p class="req" id="finalresult"></p>
  </div>

</body>
  <footer>
  </footer>

</html>

//Marken Shippers - Inner Dimensions
  var marken12L, marken28L, marken56L, marken96L;
    marken12L = (10 * 10 * 10);
    marken28L = (20 * 20 * 20);
    marken56L = (30 * 30 * 30);
    marken96L = (40 * 40 * 40);

  //World Courier Shippers - Inner Dimensions
  var gtc12L, gtc28L, gtc56L, gtc96L, vipXL, vipCase, vipTainer, cocoon850;
    gtc12L = (10 * 10 * 10);
    gtc28L = (20 * 20 * 20);
    gtc56L = (30 * 30 * 30);
    gtc96L = (40 * 40 * 40);
    vipXL = (10 * 10 * 10);
    vipCase = (20 * 20 * 20);
    vipTainer = (30 * 30 * 30);
    cocoon850 = (40 * 40 * 40);

  //Quickstat Shippers - Inner Dimensions
  var credo12L, credo28L, credo56L, credo96L, halfStack, fullStack;
    credo12L = (10 * 10 * 10);
    credo28L = (20 * 20 * 20);
    credo56L = (30 * 30 * 30);
    credo96L = (40 * 40 * 40);
    halfStack = (10 * 10 * 10);
    fullStack = (20 * 20 * 20);



document.getElementById("submit").onclick = markenResult;

function marken() {
  var selCourierMarken = document.getElementById("Marken").text;
  var selTempMarken = document.getElementById("ControlledAmbient_Refrigerated").text;
  sel.addEventListener("change", markenResult);

  var kits, l, w, h;
    kits = document.getElementById("Kits").value;
    l = document.getElementById("Length").value;
    w = document.getElementById("Width").value;
    h = document.getElementById("Height").value;

  var cbm = (l * w * h)*kits;

  if (selCourierMarken == "Marken" && selTempMarken == "ControlledAmbient_Refrigerated") return;



  if (cbm <= marken12L) {
   var result = "12L Credo";
  }
  else if (cbm <= marken28L) {
  var result = "28L Credo";
}
  else if (cbm <= marken56L) {
    var result = "56L Credo";
}
  else if (cbm <= marken96L) {
    var result = "96L Credo";
}
  else {
    alert("PALLET");
  }
  document.getElementById("finalresult").innerHTML = result;
}

Answer 1

您可以为两个选择添加事件侦听器。在两者中，您都指向相同的功能。在该函数中，检查 both 选择是否具有有效值。如果是，执行代码。

当用户选择了 2 个单独的 HTML <select> 和 <option> 元素时，有没有办法执行 Javascript 函数？

Is there a way to execute a Javascript function when 2 separate HTML <select> and <option> elements are chosen by the user?

html

javascript

select

onchange

option