Как реализовать выбор страны и затем города?

Question

[ART4]

Хочу реализовать такую штуку. На сайте будет появляться окно, где человек сначала выбирает страну, а потом город.

- Вылезло окно -> блок со страной, выбрал страну -> вылез блок div со списком городов этой страны.

Когда человек выбрал страну и город, в url записался код, допусти РФ будет /ru, Беларусь /by. И остаётся на какой то период времени этот код через куки или сессию.

Массив я так понял надо делать, где в массиве имеется такой план:
-Россия
- - Москва
- - Питер

-Беларусь
- -Минск
- - Гомель

Потом это на выходе в select выводится. При выборе РФ, во втором блоке должно показываться города которые к РФ относятся, когда выбрали допустим Москва, добавился какой то символ в урл и записался.

Это я в первые себе задачу ставлю, как реализовать такое кто пробовал, может пример какой есть, буду благодарен..!!!!

Comments

[Сергей Соколов]

Хотите реализовать или найти готовую реализацию?
Если первое, то сделайте минимальную работу: разметку, пример данных для пары городов в паре стран – чтобы было с чем экспериментировать.

[ART4]

Сергей Соколов, реализовать, там 2 страны в стране каждой по 5 городов. По меж ними и надо сравнивать.

[ART4]

Сергей Соколов, Допустим мы имеем массив.

let data = [
		{id: '1', label: 'ru', country: 'Россия', citys: [
			{id: '1-1', city: 'Москва'},
			{id: '1-2', city: 'Санк-Петербург'},
			{id: '1-3', city: 'Сочи'},
			{id: '1-4', city: 'Анапа'}
		]},
		{id: '2', label: 'by', country: 'Беларусь', citys: [
			{id: '2-1', city: 'Минск'},
			{id: '2-2', city: 'Гомель'},
			{id: '2-3', city: 'Витебск'}
		]},
		{id: '3', label: 'uk', country: 'Украина', citys: [
			{id: '3-1', city: 'Киев'},
			{id: '3-2', city: 'Львов'},
			{id: '3-3', city: 'Одеса'}
		]}
	];

[Сергей Соколов]

На чистом JS хотите сделать или чем-то реактивном типа Vue?

[ART4]

Сергей Соколов, Я не знаком ещё с Angular, Vue, React. Пока изучаю JS чистый.
Но вышло так:

let data = [
		{id: '1', label: 'ru', country: 'Россия', cities: [
			{id: '1-1', city: 'Москва'},
			{id: '1-2', city: 'Санк-Петербург'},
			{id: '1-3', city: 'Сочи'},
			{id: '1-4', city: 'Анапа'}
		]},
		{id: '2', label: 'by', country: 'Беларусь', cities: [
			{id: '2-1', city: 'Минск'},
			{id: '2-2', city: 'Гомель'},
			{id: '2-3', city: 'Витебск'}
		]},
		{id: '3', label: 'uk', country: 'Украина', cities: [
			{id: '3-1', city: 'Киев'},
			{id: '3-2', city: 'Львов'},
			{id: '3-3', city: 'Одеса'}
		]}
	];

	data.forEach(function(entry) {
	    console.log(entry);
	});

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

		countryEl.innerHTML = data.map(n => `<option class="count" value="${n.id}">${n.country}</option>`).join('');

		countryEl.addEventListener('change', function() {
		  cityEl.innerHTML = data
		    .find(n => n.id === this.value)
		    .cities
		    .map(n => `<option class="city" value="${n.id}">${n.city}</option>`)
		    .join('');
		});

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

Где при выборе Страны выбирается свой город. Сейчас голову ламаю как сделать, чтоб при выборе города, в url записывался на какое то время не смотря на какую страницу сайта зайти, приставка типа /loc=ru

[Сергей Соколов]

ART4, записать лучше в localStorage:

cityEl.addEventListener('change', (e) => {
  localStorage.setItem('myCountry', selectedCountry);
  localStorage.setItem('myCity, selectedCity);
});

А в начале при загрузке страницы проверять, есть ли что в LS:

selectedCountry = localStorage.getItem('myCountry');
selectedCity = localStorage.getItem('myCity');
if (selectedCountry) {
  // установить выбранным страну
  if (selectedCity) {
    // установить выбранным ещё и город
  }
}

[Сергей Соколов]

URL менять не так здорово.. Это вы для сервера стараетесь, чтобы он выдал контент соотв. городу? Или всё происходит только на фронтенде у посетителя в браузере?

[ART4]

Сергей Соколов, Я просто задумал так, чтоб на сайте было больше url для поисковой системы. Вот и вопрос на вопросе у меня стоит и думаю как лучше поступить..

[Сергей Соколов]

ART4, поисковики заметят, что по разным URL идентичный контент. Не в теме SEO, но предположу, что так не прибавится веса сайту.

[ART4]

Сергей Соколов, Я понял допустим:

selectedCountry = localStorage.getItem('myCountry');
	selectedCity = localStorage.getItem('myCity');
	if (selectedCountry) {
	  // установить выбранным страну
	  if (selectedCity) {
	    // установить выбранным ещё и город
	  }
	}

	cityEl.addEventListener('change', (e) => {
	  localStorage.setItem('myCountry', selectedCountry);
	  localStorage.setItem('myCity', selectedCity);
	});

Выход записи такой, значит надо сделать чтоб когда я выбрал город сразу записалось, либо кнопку какую ту типо "Применить" данные записывались и сохранялись, верно думаю я?

[Сергей Соколов]

ART4, либо держать выбранную страну в глобальной переменной (плохо) или каком-то объекте состояния, как свойство - до которого можно дотянуться из любого места кода.

[Сергей Соколов]

Лишняя кнопка = лишнее действие – нежелательно.
Пожалуй, да, можно сразу при выборе страны сохранять её в LS.
То же с городом.

[ART4]

Сергей Соколов, Начитался, насмотрелся и всё равно не понял почему при выборе страны и города не вписывается данные полученные через select мой.
localStorage.setItem - заменяет/удаляет вроде как. но мне Null выдаёт и хоть убейся

[Сергей Соколов]

ART4, может, в приватном окне дело происходит? Там недоступно LocalStorage