问根据第一次使用Javascript切换三个选项菜单

EN

const
  selectABC = document.querySelector('#abcid')
, trSelect2 = document.querySelector('tr.noDisplay')
, label_2   = trSelect2.querySelector('label')
, select_2  = trSelect2.querySelector('select')
, selCases =
  { A: { label: 'Aaa', sels:[ {k: '1', v:'Alex' }, {k: '2', v:'Jack'      }                       ] }
  , B: { label: 'Bbb', sels:[ {k: 'w', v:'US'   }, {k: 'x', v:'Australia' }, {k: 'y', v:'India' } ] }
  , C: { label: 'Ccc', sels:[ {k: '$', v:'Blue' }, {k: '£', v:'Green'     }, {k: '§', v:'Red'   } ] }
  };
  
selectABC.onchange = e =>
  {
  select_2.length        = 1
  select_2.selectedIndex = 0
  label_2.textContent    = selCases[selectABC.value].label
  selCases[selectABC.value].sels.forEach(({k,v}) => select_2.add( new Option(v,k)) )
  trSelect2.classList.remove('noDisplay')
  }

.noDisplay { display: none; }

<table>
  <tr>
    <td>
      <label>ABC:</label>
      <select id="abcid">
        <option value="" selected disabled>Select-</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
    </td>
  </tr>
  <tr class="noDisplay">
    <td>
      <label></label>
      <select>
        <option value="" selected disabled>Select-</option>
      </select>
    </td>
  </tr>
</table>

var select = document.querySelector("#abcid");

select.addEventListener('input', function (event) {
  var conditionals = document.querySelectorAll('.conditional');
  var selectedValue = select.value;
  var selectedSub = document.querySelector("#abcid-"+select.value);

  for(var i=0; i<conditionals.length; i++){
    if(selectedSub.id === conditionals[i].id){
      conditionals[i].classList.remove('hide');      
      conditionals[i].classList.add('show');      
    }else{
      conditionals[i].classList.add('hide');      
      conditionals[i].classList.remove('show');      
    }
  }

});

.hide{
  display:none;
}

.show{
  display:block;
}

ABC:
  <select id="abcid">
    <option>Select-</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>

  <select id="abcid-A" class="conditional hide">
    <option>Select-A</option>
    <option>A-A</option>
    <option>A-B</option>
    <option>A-C</option>
  </select>

  <select id="abcid-B" class="conditional hide">
    <option>Select-B</option>
    <option>B-A</option>
    <option>B-B</option>
    <option>B-C</option>
  </select>

  <select id="abcid-C" class="conditional hide">
    <option>Select-C</option>
    <option>C-A</option>
    <option>C-B</option>
    <option>C-C</option>
  </select>