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

Статус рабочей области:Завершено
Стоимость: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 дня
А что так дорого?

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

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

Перевод небольшого аудио в текст500 р.

Бюджет: 500 р. Необходимо перевести 5 минутное аудио в текстовый формат

Достать закрытое api ios приложения500 000 р.

Бюджет: 500 000 р. Нужен опытный реверсер который сможет реверснуть дейтинг приложение Bumble на ios, достать api и сделать бота для массовой регистрации + свайпов Требуется опыт раб…

  • Поднято 19.11.24
  • Ответов: 3
  • Просмотров: 35
  • Безопасная Сделка

Нужен специалист по гугл таблицам/exel 300 р.

Бюджет: 300 р. Переместить из файла ворд в гугл таблицы (доступ я дам) 6 почти одинаковых небольших таблиц. То есть было в ворде, стало в ексель точно также Задача максималь…

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