JSFiddle - React, Tailwind, and code Playground

HTML

<select id="pays">
  <option value="" selected>Choisissez le pays</option>
  <option data-country-code="fr" value="1">France</option>
  <option data-country-code="de" value="2">Allemagne</option>
  <option data-country-code="en" value="3">Angleterre</option>
  <option data-country-code="es" value="4">Espagne</option>
</select>

<select id="villes">
   <option disabled selected value> -- select an option -- </option>
</select>

JavaScript

console.clear();

var cities = [
	{
  	name : "Paris",
    code: "fr"
  },
  {
  	name: "Nantes",
  	code: "fr"  
  },
  {
  	name: "Lyon",
    code: "fr"
  },
  {
  	name: "Madrid",
    code: "es"
  },
  {
  	name: "Barcelone",
    code: "es"
  },
  {
  	name: "Munich",
    code: "de"
  },
  {
  	name: "Londres",
    code: "en"
  }
]

var countrySelect = document.getElementById('pays');
var citiesSelect = document.getElementById('villes');
var countrySelectedCode, filteredArray;
countrySelect.addEventListener('change', gerenateCities);

function gerenateCities(){
	var countrySelectedCode = this.selectedOptions[0].getAttribute('data-country-code');
  filteredArray = cities.filter(function(city){
  	return city.code === countrySelectedCode;
  });
  displayCities(filteredArray);
}

function displayCities(arr){
	citiesSelect.innerHTML = "";
  for(var i = 0; i < arr.length; i++){
  	var opt = document.createElement('option');
    opt.value = i + 1;
    opt.textContent = arr[i].name;
    citiesSelect.appendChild(opt);
  }
}