JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<select id="changeBuilding">
  <option value="1">Batiment A</option>
  <option value="2">Batiment B</option>
  <option value="3">Batiment C</option>
</select>
<div id="map1" class="building-map">
  <img src="http://lorempicsum.com/futurama/255/200/1" alt="Plan du batiment A" />
  <!-- tag HTML map correspondant -->
</div>
<div id="map2" class="building-map hide">
  <img src="http://lorempicsum.com/futurama/255/200/2" alt="Plan du batiment B" />
  <!-- tag HTML map correspondant -->
</div>
<div id="map3" class="building-map hide">
  <img src="http://lorempicsum.com/futurama/255/200/3" alt="Plan du batiment C" />
  <!-- tag HTML map correspondant -->
</div>

CSS

.hide {
  display: none;
}

JavaScript

$(function() {
	$('#changeBuilding').on('change', function() {
    $('.building-map').hide();
    $('#map' + $(this).val()).show();
  });
});