Как вызвать функцию, когда выбраны две отдельные опции HTML select? - PullRequest
Новая
       35

Как вызвать функцию, когда выбраны две отдельные опции HTML select?

0 голосов
/ 31 марта 2020

Не могли бы вы помочь мне найти способ вызова функции, когда пользователь выбирает два отдельных параметра выбора? Пожалуйста, предоставьте ответ, используя только 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", запустите указанную функцию c. 

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

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

попробуйте

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');
}
0 голосов
/ 31 марта 2020

Хорошо, обратите внимание на несколько вещей:

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

Одна проблема, которая, вероятно, вызывает у вас путаницу, состоит в том, что вы назвали обе свои функции одним и тем же именем. Это приведет к неожиданным результатам. Убедитесь, что ваши функции имеют уникальные имена. Я упоминаю об этом, чтобы вы могли избежать этой же проблемы в будущем.

...