JSFiddle - React, Tailwind, and code Playground

HTML

<select id="location" name="drop">
        <option value="loc1">Location 1</option>
        <option value="loc2">Location 2</option>
        <option value="loc3">Location 3</option>
        <option value="loc4">Location 4</option>
        <option value="loc5">Location 5</option>
        <option value="loc6">Location 6</option>
        <option value="loc7">Location 7</option>
      </select>
    <select id="second" name="term">
    <option value="OPT1">Option 1</option>
    <option value="OPT2">Option 2</option>
    <option value="OPT3">Option 3</option>
    <option value="OPT4">Option 4</option>
  </select>

CSS

#second {
  display: none;
}

#second.show {
  display: block;
}

JavaScript

const source = document.querySelector("#location");
const target = document.querySelector("#second");

const displayWhenSelected = (source, value, target) => {
    const selectedIndex = source.selectedIndex;
    const isSelected = source[selectedIndex].value === value;
    target.classList[isSelected
        ? "add"
        : "remove"
    ]("show");
};
source.addEventListener("change", (evt) =>
    displayWhenSelected(source, "loc5", target)
);