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

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

Комментарии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Ответить
  • Николай пишет:

    Не могу скопировать скрипт

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

      Исправили, пробуйте!

      Ответить
  • Айархан пишет:

    Таракан всё время отвлекает(((

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

      Очень жаль.. прикольная ведь штука)

      Ответить
  • Андрей пишет:

    хороший скрипт все работает, но на сайте отображается слева, хотелось чтобы отображался по центру.

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

      задайте стили

      Ответить
  • Рамис пишет:

    Я на платформе wordpress делаю, и у меня при выборе города не отображается информация, что я делаю не так? Ещё вопрос, можно ли эту таблицу синхронизировать с яндекс картой, чтоб при выборе города из списка яндекс карта открывала необходимый город?
    есть идея вставить в , либо .
    Буду очень благодарен за помощь

    Ответить
  • Анна пишет:

    Здравствуйте! У меня вопрос: я создала скрипт, все хорошо, но перехода нет и выбор города отправляется на новую вкладку. Мне же нужно, чтобы при выборе города, состоялся переход на окно с товаром и ценами для данного города.
    Я в этом новичок и женщина к тому же) поэтому можно мне объяснить как для дурака)))

    Ответить
  • Андрей пишет:

    Скрипт отличный, но возникла проблема. Когда вставляю на сайте и смотрю в компьютерной версии — всё супер, отображается всё как надо, но когда перехожу на мобильную версию изначально просто пусто. Ничего не отображается, но стоит переключить значение, то опять всё появляется. Например, у меня стоит изначально Москва и зайдя в мобильную версию, есть строка выбора города, но нет информации, которая должна быть по этому городу, переключаю на Челябинск, всё отлично появляется, переключаю обратно на Москву, теперь по Москве информация есть. Подскажите, плиз, как можно исправить?

    Ответить
  • Андрей пишет:

    Всё, вопрос выше снят, я разобрался )

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

    Здравствуйте.
    Подскажите, пожалуйста, как реализовать выбор города не из выпадающего списка (select), а из маркированного (ul)?

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

      Здравствуйте!

      Нужно сменить селект на список в виде:

      • Город 1
      • Город 2
      • .....

      Ответить

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

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