<header>
  <h2 class="title">HTML Events: change</h2>
  <p class="description">Подія спрацьовує при зміні значення елемента форми.</p>
</header>
<main>
  <div class="result">
    <!-- Вибір країни -->
    <label for="countrySelect">Оберіть країну:</label>
    <select id="countrySelect">
      <option value="">Оберіть країну</option>
      <option value="ua">Україна</option>
      <option value="us">США</option>
      <option value="fr">Франція</option>
    </select>

    <!-- Вибір міста, що оновлюється динамічно -->
    <label for="citySelect">Оберіть місто:</label>
    <select id="citySelect" disabled>
      <option value="">Спочатку оберіть країну</option>
    </select>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

label, select {
  display: block;
  margin-top: 15px;
}

// Отримуємо елементи з DOM
const countrySelect = document.getElementById('countrySelect');
const citySelect = document.getElementById('citySelect');

// Список міст по країнах
const cities = {
  ua: ['Київ', 'Львів', 'Одеса'],
  us: ['Нью-Йорк', 'Лос-Анджелес', 'Чикаго'],
  fr: ['Париж', 'Ліон', 'Марсель']
};

// Обробник події 'change' для вибору країни
countrySelect.addEventListener('change', function() {
  const selectedCountry = countrySelect.value;

  // Очищаємо попередні опції міста
  citySelect.innerHTML = '';
  
  if (selectedCountry) {
    citySelect.disabled = false;
    const cityOptions = cities[selectedCountry];

    // Додаємо нові опції до списку міст
    cityOptions.forEach(function(city) {
      const option = document.createElement('option');
      option.value = city.toLowerCase();
      option.textContent = city;
      citySelect.appendChild(option);
    });
  } else {
    // Вимикаємо вибір міста, якщо країна не вибрана
    citySelect.disabled = true;
    citySelect.innerHTML = '<option value="">Спочатку оберіть країну</option>';
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.