Как сделать фильтр по городам?

Для создания фильтра по городам в JavaScript нужно реализовать несколько шагов. Давайте рассмотрим подробно каждый из них:

1. Получение данных: Прежде всего, нам нужно получить данные с городами. Вы можете получить данные от сервера, использовать API или импортировать их из локального файла. Например, предположим, что у нас есть список городов в формате JSON, который мы получили с сервера:

const cities = [{
    "name": "Москва",
    "country": "Россия"
  },
  {
    "name": "Нью-Йорк",
    "country": "США"
  },
  // другие города
];

2. Создание HTML элементов: Далее, нам понадобится создать HTML элементы, в которых будут отображаться города и фильтр. Пример HTML разметки может выглядеть следующим образом:

<select id="city-filter">
  <option value="">Все города</option>
  <option value="Россия">Россия</option>
  <option value="США">США</option>
  <!-- другие города -->
</select>
<ul id="city-list">
  <!-- здесь будут отображаться города -->
</ul>

3. Фильтрация данных: Когда пользователь выбирает значение в фильтре, мы должны отфильтровать города и отобразить только те, которые удовлетворяют выбранному значению. Для этого добавим слушатель события change на фильтре и каждый раз, когда выбранное значение изменяется, будем производить фильтрацию:

const cityFilter = document.getElementById('city-filter');
const cityList = document.getElementById('city-list');

cityFilter.addEventListener('change', function() {
  const selectedCountry = this.value;
  const filteredCities = cities.filter(city => city.country === selectedCountry || selectedCountry === "");
  
  renderCities(filteredCities);
});

Здесь мы фильтруем города с использованием метода filter(). Если выбранное значение фильтра равно пустой строке (""), то отображаем все города. В противном случае, мы фильтруем города по выбранной стране.

4. Отображение данных: Наконец, нам нужно отобразить отфильтрованные города на странице. Для этого создадим функцию renderCities(), которая будет генерировать HTML для каждого города:

function renderCities(cities) {
  cityList.innerHTML = '';

  cities.forEach(city => {
    const cityItem = document.createElement('li');
    cityItem.innerText = city.name;
    cityList.appendChild(cityItem);
  });
}

Здесь мы очищаем предыдущий список городов (cityList.innerHTML = ""), а затем для каждого города создаем элемент li и добавляем его в список городов.

В итоге, после выполнения всех шагов, у вас будет реализован фильтр по городам на странице. При выборе определенной страны в фильтре будут показаны только города этой страны, а при выборе "Все города" будут показаны все города из исходного списка.