Функционал выбора города на сайте

Статус рабочей области:Завершено
Стоимость:1 300 рублей
Срок выполнения:2 дня
Варианты оплаты:Планируется использовать Безопасную сделку
Дата публикации:2024-11-12 11:25
Была на сайте:2024-11-19 12:18

Функционал выбора города на сайте

 
Задача

Сайт на html https://niist1.ru/.
С помощью js надо сделать функционал:
при выборе города в шапке сайта, должен меняться адрес и телефон ниже. В скрине отметила.
Нажимая на адрес, должно появляться всплывающее окно с картой (яндекс либо гугл) с нужным адресом.
Такой функционал есть на другом нашем сайте https://fisexpert.ru/uslugi.html. Можете просто оттуда скопировать и встроить в новый сайт. Главное, чтобы работало.

Оставлять заявки могут только авторизованные пользователи.
Исполнитель по этому заданию выбран.
Stanislav Ricci
Stanislav Ricci ricci
Специализация: Программирование и IT
  • 1 300 руб2 дня
Чтобы реализовать функционал смены адреса и телефона при выборе города в шапке сайта, а также отображение карты при нажатии на адрес, вы можете следовать следующим шагам:

1. Создание выпадающего списка городов в шапке сайта
Добавьте в шапку вашего сайта элемент <select> со списком городов:

<select id="city-select">
<option value="moscow">Москва</option>
<option value="saint-petersburg">Санкт-Петербург</option>
<option value="novosibirsk">Новосибирск</option>
<!-- Добавьте другие города по необходимости -->
</select>

2. Определение данных для каждого города
Создайте объект в JavaScript, содержащий адреса, телефоны и ссылки на карты для каждого города:

const cityData = {
moscow: {
address: 'ул. Тверская, д. 1',
phone: '+7 (495) 123-45-67',
mapLink: 'https://yandex.ru/maps/-/CCQ~ZPs5'
},
'saint-petersburg': {
address: 'Невский проспект, д. 1',
phone: '+7 (812) 123-45-67',
mapLink: 'https://yandex.ru/maps/-/CCQ~ZPsf'
},
novosibirsk: {
address: 'ул. Ленина, д. 1',
phone: '+7 (383) 123-45-67',
mapLink: 'https://yandex.ru/maps/-/CCQ~ZPsj'
}
// Добавьте другие города по необходимости
};

3. Обновление адреса и телефона при выборе города
Добавьте в HTML элементы для отображения адреса и телефона:

<p>Адрес: <span id="address" class="clickable">ул. Тверская, д. 1</span></p>
<p>Телефон: <span id="phone">+7 (495) 123-45-67</span></p>

Добавьте следующий JavaScript-код для обновления информации при смене города:

const citySelect = document.getElementById('city-select');
const addressElement = document.getElementById('address');
const phoneElement = document.getElementById('phone');

citySelect.addEventListener('change', function () {
const selectedCity = citySelect.value;
const data = cityData[selectedCity];

if (data) {
addressElement.textContent = data.address;
phoneElement.textContent = data.phone;
addressElement.setAttribute('data-map-link', data.mapLink);
}

Примеры моих работ

Немного интерьера
  • ricci
  • Немного интерьера
 
 
Дмитрий Гвоздь
Дмитрий Гвоздь svfolder

Yii2 Joomla VB.NET/C# PHP MySQL

Специализация: Программирование и IT
  • 1 300 руб2 дня
А что так дорого?

Оставлять заявки могут только авторизованные пользователи.

Другие открытые задания:

Трафик целевых заявок SMM70 000 р.

Бюджет: 70 000 р. ТЕМА: получение земельного участка с муниципальных торгов с выгодой до 70% с подрядом строительства дома (желательно) Продвижение услуг сопровождения по процедуре …

  • Поднято 19.11.24
  • Ответов: 12
  • Просмотров: 110
  • Заключение договора

автоматизация клиентской поддержки с использованием AI-модулей: настройка, сопровождение и аналитика150 000 р.

Бюджет: 150 000 р. Добрый день. В бизнес процессы онлайн школы требуется внедрить нейросети. Открыты к любым вашим предложениям, на начальном этапе рассматриваем варианты, которые…

Для Веб-Мастеров работа по системе CPS .13 300 р.

Бюджет: 13 300 р. Для Веб-Мастеров работа по системе CPS . Стоимость : 15 000рублей Срок выполнения : 90 дней Описание проекта : Меня зовут Олег и я занимаюсь производств…

поиск заданий