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

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

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

 
Задача

Сайт на 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 дня
А что так дорого?

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

makefishing.ru Joomla! Virtuemart
  • svfolder
  • makefishing.ru Joomla! Virtuemart
Огромный каталог авто запчастей ( каталог более 15 млн. страниц)
  • svfolder
  • Огромный каталог авто запчастей ( каталог более 15 млн. страниц)
Разработка
  • svfolder
  • Разработка

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

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

Разработка 3 информационных карточек для размещения на Авито3 000 р.

Бюджет: 3 000 р. Необходимо разработать три информационные карточки для размещения на Авито. Карточки должны быть выполнены в едином стиле, с соблюдением базовых требований платформ…

Менеджер по продажам и развитию (удаленно, только через чаты)1 500 р.

Бюджет: 1 500 р. Мы ищем амбициозного и энергичного специалиста для работы с клиентами и развития бизнеса. Эта роль идеально подходит для тех, кто готов к новым вызовам, хочет расти…

Написание отзывов на геоплощадках (яндекс , гугл , 2гис )300 р.

Бюджет: 300 р. тг ··· Все в лс

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