JSFiddle - React, Tailwind, and code Playground

HTML

<select class="cities">
  <option></option>
  <option value="Питер">Питер</option>
  <option value="Москва">Москва</option>
</select>

<div id="media_content">
  <p>
    Питер:
    <a href="tel: +375(44) 774-72-11">  +375(44) 774-72-11</a>
  </p>
</div>

<div class="map_sity">
  <img src="img/map.png" alt="">  Москва
  <select>
    <option >Москва</option>
    <option >Москва</option>
  </select>
</div>

CSS

#media_content {
  display: none;
}

.map_sity {
  display: none;
}

JavaScript

document.querySelector(".cities").addEventListener("change", function() {
  if (this.value == "Питер") {
    document.querySelector("#media_content").style.display = "block";
    document.querySelector(".map_sity").style.display = "none";
  } else if (this.value == "Москва") {
    document.querySelector("#media_content").style.display = "none";
    document.querySelector(".map_sity").style.display = "block";
  }
});