javascript - 드롭 다운에서 특정 값이 선택된 경우 다른 드롭 다운이 표시됩니다

html 웹 페이지에 드롭 다운 메뉴가 있습니다. 사용자가 드롭 다운에서 값을 선택할 때 후속 드롭 다운을 표시하고 싶습니다. 예 : 드롭 다운 1 선택 값 1>표시 드롭 다운 2. 드롭 다운 1 선택 값 2>표시 드롭 다운 3

아래 코드에 거의 다 있다고 생각합니다. 세 개의 드롭 다운이 있고 처음에는 첫 번째 만 표시됩니다. 그러나 클라이언트 1을 선택한 경우 드롭 다운 클라이언트 1을 표시하도록 설정하고 클라이언트 2를 선택한 경우 드롭 다운 클라이언트 2를 표시하도록 설정하려면 if 문을 지정해야한다고 생각합니다.

나는 if 를 시도했다  진술하지만 작동시킬 수 없습니다. 최소한 일종의 구문 오류가 예상되거나 내가 시도한 내용이 내가 접근 한 방식으로 작동하지 않습니다.

var elem = document.getElementById("client");
var strUser = e.options[e.selectedIndex].value;
if (strUser.value == "Client 1");
elem.onchange = function() {
  var hiddenDiv = document.getElementById("client1");
  hiddenDiv.style.display = (this.value == "") ? "none" : "block";
};
else
  elem.onchange = function() {
    var hiddenDiv = document.getElementById("client2");
    hiddenDiv.style.display = (this.value == "") ? "none" : "block";
  };

<select class="default" id="client" name="client">
  <option value="" selected>Select Client</option>
  <option value="1">Nike</option>
  <option value="2">Adidas</option>
</select>
<select class="default" id="Nike_group" name="Nike_group" style="display: none;">
  <option value="" selected>Select option</option>
  <option value="1">Zoom</option>
  <option value="2">Vapour</option>
</select>
<select class="default" id=Adidas_style" name="adidas_style" style="display: none;">
  <option value="" selected>Select option</option>
  <option value="1">Running</option>
  <option value="2">Football</option>
<option value="3">Rugby</option>
</select>
<select class="default" id=Adidas_rugby" name="adidas_rugby" style="display: none;">
  <option value="" selected>Select option</option>
  <option value="1">England</option>
  <option value="2">France</option>
  <option value="3">Wales</option>
</select>
<select class="default" id=Adidas_football" name="adidas_rugby" style="display: none;">
  <option value="" selected>Select option</option>
  <option value="1">Man UTD</option>
  <option value="2">Chelsea</option>
  <option value="3">Everton</option>
</select>