JSFiddle - React, Tailwind, and code Playground

HTML

<select class="select-c">
  <option value="c1">
    البلد 1
  </option>
  <option value="c2">
    البلد 2
  </option>
  <option value="c3">
    البلد 3
  </option>
  <option value="c4">
    البلد 4
  </option>
</select>
<select class="select-m c1">
  <option value="c1-m1">
    مدينة 1 من البلد 1
  </option>
  <option value="c1-m2">
    مدينة 2 من البلد 1
  </option>
  <option value="c1-m3">
    مدينة 3 من البلد 1
  </option>
</select>
<select class="select-m c2" style="display: none;">
  <option value="c2-m1">
    مدينة 1 من البلد 2
  </option>
  <option value="c2-m2">
    مدينة 2 من البلد 2
  </option>
  <option value="c2-m3">
    مدينة 3 من البلد 2
  </option>
</select>
<select class="select-m c3" style="display: none;">
  <option value="c3-m1">
    مدينة 1 من البلد 3
  </option>
  <option value="c3-m2">
    مدينة 2 من البلد 3
  </option>
  <option value="c3-m3">
    مدينة 3 من البلد 3
  </option>
</select>
<select class="select-m c4" style="display: none;">
  <option value="c3-m1">
    مدينة 1 من البلد 4
  </option>
  <option value="c3-m2">
    مدينة 2 من البلد 4
  </option>
  <option value="c3-m3">
    مدينة 3 من البلد 4
  </option>
</select>

JavaScript

var selectC = document.querySelector("select.select-c"),
		selectM = document.querySelectorAll("select.select-m"),
    lastSelectIndex = 0;
selectC.addEventListener("change", function () {
  selectM[lastSelectIndex].style.display = "none";
  lastSelectIndex = +this.value.slice(1) - 1;
  selectM[lastSelectIndex].style.display = "";
});