Для создания фильтра по городам в 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
и добавляем его в список городов.
В итоге, после выполнения всех шагов, у вас будет реализован фильтр по городам на странице. При выборе определенной страны в фильтре будут показаны только города этой страны, а при выборе "Все города" будут показаны все города из исходного списка.