JSFiddle - React, Tailwind, and code Playground
HTML
<select id="one" onchange="reset(this)">
<option></option>
<option>Coffee</option>
<option>Tea</option>
<option>Espresso</option>
</select>
<select id="two" onchange="reset(this)">
<option></option>
<option>Milk</option>
<option>Sugar</option>
<option>Water</option>
</select>
<select id="three" onchange="displayResult()">
<option></option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div id="output"></div>
JavaScript
function reset(e) {
var caller = e;
if (caller.id === "one") {
document.getElementById("two").value = 0;
document.getElementById("three").value = 0;
} else {
document.getElementById("three").value = 0;
}
displayResult();
}
function displayResult() {
var one = document.getElementById("one");
var valueOne = one.selectedIndex != -1 ? (one.options[one.selectedIndex].value) : "";
var two = document.getElementById("two");
var valueTwo = two.selectedIndex != -1 ? (two.options[two.selectedIndex].value) : "";
var three = document.getElementById("three");
var valueThree = three.selectedIndex != -1 ? (three.options[three.selectedIndex].value) : "";
document.getElementById("output").innerHTML = "";
document.getElementById("output").innerHTML = "<p>Dropdown one:\n" + valueOne + "</p>";
document.getElementById("output").innerHTML += "<p>Dropdown two:\n" + valueTwo + "</p>";
document.getElementById("output").innerHTML += "<p>Dropdown three:\n" + valueThree + "</p>";
}