8uh.ru - это информационный портал в стиле "Подслушано". Обсуждаем важные новости мира и интернета, показываем тонкости работы с различными сайтами и социальными сетями: от сайтов поисковых систем Яндекс, Гугл, Мэйл, Рамблер, Нигма до соцсетей Вконтакте, Одноклассники, Твиттер и Пинтерест. Подсказываем как грамотно сделать сайт и получить на него посетителей, используя различные способы продвижения сайтов: SEO-продвижение, краунд-маркетинг, соцсигналы, SMM-маркетинг и SMO-маркетинг.

Выбор города. Простой скрипт для любого сайта.

Частенько возникают ситуации, когда для сайта необходимо сделать форму, с помощью которой пользователи смогут выбирать города-представительства и видеть некую специфическую информацию, характерную для выбранного города. В сети есть несколько готовых решений, основанных на платных и бесплатных базах, на YandexAPI, GOOGLEAPI и других, но порой нужно максимально просто и быстро прикрепить к сайту возможность смены локации и соответствующей информации. И у нас есть решение этого вопроса!

Скрипт-модуль выбора города (страны или региона)

Сразу оговоримся, что этот скрипт-модуль можно применить для любого интернет-ресурса, на котором используется свежая библиотека jQuery (версии выше 2). Его можно разместить в коде нужной страницы сайта в любом расположении: в шапке, в боковом правом или левом меню, в подвале сайта. Если на ресурсе используется какой-либо движок (CMS, система управления содержимым), то вставку можно произвести через использование виджета «HTML-код».

Полный листинг кода скрипта выбора города для сайта:

Далее, подробно разберём этот код.

Список выбора региона, страны или города

Первое, что нужно сделать — указать список локаций, выбор которых вы хотите возложить на плечи пользователей. Делается он с помощью специальных тегов в этой части кода:

Если нужно больше локаций — добавляйте, но делайте уникальные ID — они нам пригодятся. Далее, указываем в нужном месте информацию, которая будет выводится в зависимости от выбранного города (ВАЖНО! Указывайте классы с таким же названием, как и в ID select-а):

Обратите внимание, вложенные блоки основного контейнера будут скрыты с помощью:

Jquery магия

Теперь начинается та самая магия. С помощью jQuery скрипта мы будем показывать блок с информацией в зависимости от выбранного значения SELECT. Плюс ко всему, запишем наш выбор в LOCAL STORAGE (локальное хранилище браузера — «аналог» cookies, который позволит запомнить выбор пользователя при перезагрузке страницы или перехода на другую страницу нашего сайта):

В общем-то всё! Размещаем код, сохраняем и любуемся. Если будут вопросы — пишите в комментарии.

ТЕСТ:

Выбор города:

Тел.: НОМЕР ТЕЛЕФОНА Челябинск
Email: mail@mail.ru
Тел.: НОМЕР ТЕЛЕФОНА Москва
Email: mail@mail.ru
Тел.: НОМЕР ТЕЛЕФОНА Санкт-Петербург
Email: mail@mail.ru
Тел.: НОМЕР ТЕЛЕФОНА Нижний Новгород
426-968-289
Email: mail@mail.ru

Рассказать о подслушанном:

Комментарии

Комментариев: 7, к записи: “Выбор города. Простой скрипт для любого сайта.
  • Александр пишет:

    Огромное спасибо за рецепт — я прям воспрял духом решая проблему «Выбор города» на простеньком сайте.
    Но никак не получается с помощью предложенного подхода решить задачу «выбрал город в одном блоке страницы — в остальных (двух) блоках отображается сделанный выбор».
    Т.е. на одной странице работают три копии этого скрипта (и работают хорошо), но работают независимо (каждая копия использует свою запись «LocalStorage» — иначе у меня не получилось).
    А мне позарез нужен функционал «пользователь выбрал город один раз и его выбор отображается в трёх блоках каждой страницы сайта с возможностью поменять город в каждом из блоков» (блоки «город + соответствующий номер телефона» повторяются на всех страницах сайта по три раза).

    Ответить
  • Сергей пишет:

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

    Ответить
    • Глава 8-ми ушей пишет:

      Автоматический выбор города — это, на самом деле, плохо. Представьте, робот зайдёт на сайт. Что ему будет отдано?

      Ответить
  • Александр пишет:

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

    Ответить
    • Глава 8-ми ушей пишет:

      Скопируйте все строки из примера себе и посмотрите как работает. Обратите внимание на стили.
      Скорее всего у вас конфликт в скриптах.

      Ответить
  • Александр пишет:

    Благодарю за ответ. Изначально скопировал все строки вашего примера. И помимо выпадающего меню с городами ничего не отображается. Стили смотрел, конфликтов нет.

    Как считаете в чем еще может быть загвоздка?

    Ответить
  • Александр пишет:

    Спасибо разобрался, проблема была в jquerry.
    Подключил для теста
    и всё заработало на УРА!
    Благодарю за статью!!!

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *