您还可以启用/禁用表单字段，而不是添加和删除选择元素的选项。在本例中，每个cityselect都在自己的字段集中。所有字段集最初都是禁用的。当选择了countryselect中的选项时，匹配的字段集将被启用。
多个表单域具有相同的名称不是问题。如果表单域或域集被禁用，则表单域不会包含在提交事件中。

document.forms.form01.countryselect.addEventListener('change', e => {
  let form = e.target.form;
  [...form.elements]
    .filter(elm => elm.nodeName == 'FIELDSET')
    .forEach(elm => elm.disabled = true);
  form[e.target.value].disabled = false;
});

fieldset {
  border: none;
}

fieldset:disabled {
  display: none;
}

<form name="form01">
  <select class="form-control-selector" name="countryselect" required>
    <option class="select-option" value="" selected>- Choose Country</option>
    <option class="select-option" value="Ug">Ug</option>
    <option class="select-option" value="Ke">Ke</option>
    <option class="select-option" value="Rw">Rw</option>
    <option class="select-option" value="Tz">Tz</option>
    <option class="select-option" value="SA">SA</option>
  </select>
  <fieldset name="Ug" disabled>
    <select class="form-control-selector" name="cityselect" required>
      <option class="select-option" value="" selected>- Choose City </option>
      <option value="A">A</option>
      <option value="B">B</option>
    </select>
  </fieldset>
  <fieldset name="Ke" disabled>
    <select class="form-control-selector" name="cityselect" required>
      <option class="select-option" value="" selected>- Choose City </option>
      <option value="C">C</option>
      <option value="D">D</option>
    </select>
  </fieldset>
</form>

此代码检查第一个选择元素（#countryselect）中的选定选项，并相应地填充第二个选择元素（#cityselect）。您可以扩展每个国家/地区的if条件，并添加相应的城市选项。如果有许多国家/地区，您可以考虑使用switch语句或更高级的数据结构将国家/地区Map到城市。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="form-control-selector" id="countryselect" name="countryselect" required>
  <option class="select-option" value="" selected>- Choose Country</option>
  <option class="select-option" value="Ug">Ug</option>
  <option class="select-option" value="Ke">Ke</option>
  <option class="select-option" value="Rw">Rw</option>
  <option class="select-option" value="Tz">Tz</option>
  <option class="select-option" value="SA">SA</option>
</select>

<select class="form-control-selector" id="cityselect" name="cityselect" required>
  <option class="select-option" value="" selected>- Choose City </option>
</select>

<script>
    $("#countryselect").change(function(){
        var selectedOption = $(this).val();
        $("#cityselect").empty();
        
        if(selectedOption === "Ug"){
            $("#cityselect").append($('<option value="A">A</option>'));
            $("#cityselect").append($('<option value="B">B</option>'));
        } else if(selectedOption === "Ke"){
            $("#cityselect").append($('<option value="C">C</option>'));
            $("#cityselect").append($('<option value="D">D</option>'));
        } else if(selectedOption === "Rw"){
            // Add options for Rwanda
        } else if(selectedOption === "Tz"){
            // Add options for Tanzania
        } else if(selectedOption === "SA"){
            // Add options for South Africa
        }
    });
</script>

字符串