javascript html dynamic dropdown dropbox

Multiple drop down boxes?

I'm trying to get multiple drop down boxes to open when selecting different prompts from an original drop down menu.

So for example the original drop box would say "Continent" then drop down to a list of continents, when you select a continent a new box opens that asks you "Country" then you select a country and a new drop box opens to select a state.

I've been using this template

<script type="text/javascript">
    function CheckDepartment(val){
     var element=document.getElementById('othercolor');
     if(val=='others')
       element.style.display='block';
     else
       element.style.display='none';}
    function CheckOption(val){
        var element=document.getElementById('misc')
        if(val=='misc')
            element.style.display='block';
        else
            element.style.display='block';
    }

    </script>
    </head>
    <body>
      <select name="color" onchange='CheckDepartment(this.value);'>
        <option>pick a color</option>
        <option value="red">RED</option>
        <option value="blue">BLUE</option>
        <option value="others">others</option>
      </select>
    <select name="othercolor" id="othercolor" onchange='CheckOption(this.value)' style='display:none;'/>
    <option value=""></option>
    <option value="hi">hi</option>
    <option value="misc" id="misc" >misc</option>
</select>
    <select name="third" style='display:none;'>
        <option value=""></option>
        <option value="first">first</option>
        <option value="second">second</option>

    </select>

but I can't get a third drop box to open when selecting an option from the second drop box.

edit: third box. I think i deleted my last try so this was kinda a recreation of it from what I remembered. I'm also incredibly new at all of this and don't know if anything I tried makes sense.

Solution

Here's a simplified demo.
(It assumes only a "yes" value should trigger the display of the next dependent dropdown.)

const
  select1 = document.getElementById("select1"),
  select2 = document.getElementById("select2");

document.addEventListener("change", handleDropdownDisplay);

function handleDropdownDisplay(event) {
  let changedElement = event.target;
  if ((changedElement != select1) && (changedElement != select2)) {
    return;
  }
  if (changedElement.value == "yes") {
    changedElement.parentElement.nextElementSibling.classList.remove("hidden");
  } else {
    changedElement.parentElement.nextElementSibling.classList.add("hidden");
  }
}

div {
  margin-bottom: 0.5em;
}

.hidden {
  display: none;
}

<div>
  <label for="select1">Show level 2?</label>
  <select id="select1">
    <option value="no">No</option>
    <option value="yes">Yes</option>
  </select>
</div>

<div class="hidden">
  <label for="select2">Show level 3?</label>
  <select id="select2">
    <option value="no">No</option>
    <option value="yes">Yes</option>
  </select>
</div>

<div class="hidden">
  <label for="select3">Would your rather</label>
  <select id="select3">
    <option value="brains">Eat monkey brains</option>
    <option value="vba">Write code in VBA</option>
  </select>
</div>

(Btw, level 3 doesn't automatically become hidden whenever level 2 becomes hidden. This is probably functionality you'll want to add.)