选择两个单独的 HTML select 选项时如何调用函数？

Question

当用户 select 有两个单独的 select 选项时，您能帮我找到一种调用函数的方法吗？请仅使用 Javascript 提供答案。我真的很难理解这个问题，因为我最近才开始学习。我想根据两个 select 的组合显示不同的结果。

    <body>
  <header><div class="Heading"><h1>Shipper Calculator</h1></div><hr></header>
      <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>

以下是我目前所有的 Javscript。当某个选项被 selected 但它们不能一起工作时，这可以显示警报。例如，我最想说的是……如果 "Marken" 和 "Dry Ice" 是 selected，那么运行是一个特定的函数。

document.getElementById("Courier").addEventListener("change", myFunction);
function myFunction() {
 var x = document.getElementById("Courier").selectedIndex;
 if (x == "3")
 alert("hey");
}

document.getElementById("Temperature").addEventListener("change", myFunction);
function myFunction() {
 var x = document.getElementById("Temperature").selectedIndex;
 if (x == "3")
 alert("hey");
}

Answer 1

好的，有几点需要注意：

改为将选项 ID 更改为值：

<select id="Courier">
    <option disabled="disabled" selected="selected">Courier</option>
    <option value="Marken">Marken</option>
    <option value="WorldCourier">World Courier</option>
    <option value="Quickstat">Quickstat</option>
    <option value="DHL">DHL</option>
</select>
<select id="Temperature">
    <option disabled="disabled" selected="selected">Temperature</option>
    <option value="ControlledAmbient_Refrigerated">15-25ºC / 2-8ºC</option>
    <option value="ControlleFrozen">-25ºC to -15º</option>
    <option value="DryIce">Dry Ice</option>
    <option value="Ambient">Ambient</option>
</select>

为什么不使用一个函数来检查两个选择：

document.getElementById("Courier").addEventListener("change", myFunction);

document.getElementById("Temperature").addEventListener("change", myFunction);

function myFunction() {
    var y = document.getElementById("Courier");
    var x = document.getElementById("Temperature");
    if (y.value === "Marken" && x.value === "DryIce") {
        alert("hey");
    }
}

一个可能让您感到困惑的问题是您将两个函数命名为相同的名称。这会导致意想不到的结果。确保您的函数具有唯一的名称。我提到这一点是为了避免您以后遇到同样的问题。

Answer 2

试试这个

https://jsfiddle.net/470dxe2b/

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

Javascript

let temp = document.getElementById('Temperature');
let cour = document.getElementById('Courier');

temp.addEventListener('change', () => update());
cour.addEventListener('change', () => update());

function update(){
    dropDown1Value = cour.value;
    dropDown2Value = temp.value;

    switch (dropDown1Value + dropDown2Value) {
        case 'MarkenDryIce' :
                MarkenDryIce();
        break;
        default:
                console.log('Nothing to do');
        break;
    }
}

function MarkenDryIce(){
        alert('Marken + Dry Ice Selected');
}

选择两个单独的 HTML select 选项时如何调用函数？

How to call a function when two separate HTML select options are chosen?

javascript

if-statement

function

onchange

addeventlistener