JSFiddle - React, Tailwind, and code Playground

HTML

<select id="country"></select>
<select id="city"></select>

JavaScript

const setOptions = (el, data) => el.innerHTML = data.map(n => `<option>${n}</option>`).join('');


const countries = [
  { name: 'Германия', cities: [ 'Берлин', 'Бонн', 'Мюнхен' ] },
  { name: 'Франция', cities: [ 'Париж', 'Лион', 'Марсель' ] },
  { name: 'Италия', cities: [ 'Рим', 'Неаполь', 'Милан' ] },
];


const country = document.querySelector('#country');
const city = document.querySelector('#city');


setOptions(country, countries.map(n => n.name));

country.addEventListener('change', function() {
  setOptions(city, countries.find(n => n.name === this.value).cities);
});

country.dispatchEvent(new Event('change'));