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

【问题标题】：How to call a function when two separate HTML select options are chosen?选择两个单独的 HTML 选择选项时如何调用函数？
【发布时间】：2020-07-11 09:28:33
【问题描述】：

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

    <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 的全部内容。这可以在选择某个选项但它们不能一起工作时显示警报。例如，我想要说的是……如果选择了“Marken”和“Dry Ice”，则运行特定的功能。

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

【问题讨论】：

标签： javascript function if-statement onchange addeventlistener

【解决方案1】：

试试这个

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

【讨论】：

这似乎是我想要的。您是否可以解释一些代码，因为我想了解它是如何工作的？如果不能，请不要担心，我会尝试调查一下
基本上，它将事件侦听器添加到触发 update 函数的两个下拉列表中。这会从 2 个下拉菜单中获取值并将它们组合在一起以形成一个键。该键随后用于在 switch 语句中执行查找，因此您可以为所需的组合添加更多 case 语句。当值未知或不好时，还有一个默认值。当一个语句键匹配时，它在里面的代码中运行，在这个实例中恰好是一个函数。但它可以是你喜欢的任何其他逻辑。希望这会有所帮助。
请记得点赞或选择一个选定的答案

【解决方案2】：

有几点需要注意：

将选项 id 改为 value：

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

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

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

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

【讨论】：

谢谢！那是一项复制和粘贴工作！明天我会试试你的建议！
你能按照你的建议执行 if 语句吗.... if (y.value === "Marken" && x.value === "Dry Ice") ？而不是警报？
如果我理解正确，您是在询问是否可以用其他逻辑替换警报。如果那是您要问的，那么是的。用你需要的任何逻辑替换alert("hey")。
由于拼写错误，我更新了代码。 if 语句中的第二个值应该是 "DryIce" 而不是 "Dry Ice"（带有空格），因为它指的是值而不是文本。