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

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

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

 
Задача

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

Оставлять заявки могут только авторизованные пользователи.
Исполнитель по этому заданию выбран.
Stanislav Ricci
Stanislav Ricci ricci

Превращаю идеи в цифровое волшебство!

Специализация: IT-технологии и Разработка
    Чтобы реализовать функционал смены адреса и телефона при выборе города в шапке сайта, а также отображение карты при нажатии на адрес, вы можете следовать следующим шагам:

    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);
    }
    Дмитрий Гвоздь
    Дмитрий Гвоздь svfolder

    Yii2 Joomla VB.NET/C# PHP MySQL

    Специализация: IT-технологии и Разработка
    А что так дорого?

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

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

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

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

    Ассистент по постингу публикаций300 р.

    Бюджет: 300 р. Здравствуйте ! Ищем к себе в команду целеустремленных и ответственных сотрудников для работы с публикациями и объявлениями. Обязанности: необходимо создавать…

    Лиды . Нужен трафик с хорошими Лидами .Трафик-менеджер .10 500 р.

    Бюджет: 10 500 р. Лиды . Нужен трафик с хорошими Лидами .Трафик-менеджер . Трафик-менеджер . Нужен трафик-менеджер для создания потока клиентов . Меня зовут Олег и я занимаюсь …

    Необходимо размещение текстов100 р.

    Бюджет: 100 р. Требуются копирайтеры для публикации текстов

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