Частенько возникают ситуации, когда для сайта необходимо сделать форму, с помощью которой пользователи смогут выбирать города-представительства и видеть некую специфическую информацию, характерную для выбранного города. В сети есть несколько готовых решений, основанных на платных и бесплатных базах, на YandexAPI, GOOGLEAPI и других, но порой нужно максимально просто и быстро прикрепить к сайту возможность смены локации и соответствующей информации. И у нас есть решение этого вопроса!
Содержание
Скрипт-модуль выбора города (страны или региона)
Сразу оговоримся, что этот скрипт-модуль можно применить для любого интернет-ресурса, на котором используется свежая библиотека jQuery (версии выше 2). Его можно разместить в коде нужной страницы сайта в любом расположении: в шапке, в боковом правом или левом меню, в подвале сайта. Если на ресурсе используется какой-либо движок (CMS, система управления содержимым), то вставку можно произвести через использование виджета «HTML-код».
Полный листинг кода скрипта выбора города для сайта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<h3 class="class">Выбор города:</h3> <style>.containerss div {display: none;}</style> <select id="selectItem"> <option id="chelyabinsk">Челябинск</option> <option id="moskva">Москва</option> <option id="piter">Санкт-Петербург</option> <option id="nnovgor">Нижний Новгород</option> </select> <div class="containerss"> <div class="chelyabinsk"><span class="small">Тел.:</span> НОМЕР ТЕЛЕФОНА<br><span class="small">Email:</span> <a href="mailto:mail@mail.ru">mail@mail.ru</a></div> <div class="moskva"><span class="small">Тел.:</span> НОМЕР ТЕЛЕФОНА<br><span class="small">Email:</span> <a href="mailto:mail@mail.ru">mail@mail.ru</a></div> <div class="piter"><span class="small">Тел.:</span> НОМЕР ТЕЛЕФОНА<br><span class="small">Email:</span> <a href="mailto:mail@mail.ru">mail@mail.ru</a></div> <div class="nnovgor"><span class="small">Тел.:</span> НОМЕР ТЕЛЕФОНА<br><span class="icq">426-968-289</span><br><span class="small">Email:</span> <a href="mailto:mail@mail.ru">mail@mail.ru</a></div> </div> <script type="text/javascript"> <!-- $( function() { if (localStorage.getItem("myKey")) { var stored_select = localStorage.getItem("myKey"); $('#' + stored_select).prop( "selected", true ); $('.' + stored_select).show(); } else { $('.chelyabinsk').show(); } }); $("#selectItem").change(function(){ $('.containerss').find('div').hide(); var selected = $('#selectItem option:selected').attr('id'); localStorage.setItem("myKey", selected); $('.' + selected).show(); }); --> </script> |
Далее, подробно разберём этот код.
Список выбора региона, страны или города
Первое, что нужно сделать — указать список локаций, выбор которых вы хотите возложить на плечи пользователей. Делается он с помощью специальных тегов в этой части кода:
|
1 2 3 4 5 6 7 8 |
<select id="selectItem"> <option id="chelyabinsk">Челябинск</option> <option id="moskva">Москва</option> <option id="piter">Санкт-Петербург</option> <option id="nnovgor">Нижний Новгород</option> </select> |
Если нужно больше локаций — добавляйте, но делайте уникальные ID — они нам пригодятся. Далее, указываем в нужном месте информацию, которая будет выводится в зависимости от выбранного города (ВАЖНО! Указывайте классы с таким же названием, как и в ID select-а):
|
1 2 3 4 5 6 7 8 |
<div class="containerss"> <div class="chelyabinsk"><span class="small">Тел.:</span> НОМЕР ТЕЛЕФОНА<br><span class="small">Email:</span> <a href="mailto:mail@mail.ru">mail@mail.ru</a></div> <div class="moskva"><span class="small">Тел.:</span> НОМЕР ТЕЛЕФОНА<br><span class="small">Email:</span> <a href="mailto:mail@mail.ru">mail@mail.ru</a></div> <div class="piter"><span class="small">Тел.:</span> НОМЕР ТЕЛЕФОНА<br><span class="small">Email:</span> <a href="mailto:mail@mail.ru">mail@mail.ru</a></div> <div class="nnovgor"><span class="small">Тел.:</span> НОМЕР ТЕЛЕФОНА<br><span class="icq">426-968-289</span><br><span class="small">Email:</span> <a href="mailto:mail@mail.ru">mail@mail.ru</a></div> </div> |
Обратите внимание, вложенные блоки основного контейнера будут скрыты с помощью:
|
1 |
<style>.containerss div {display: none;}</style> |
Jquery магия
Теперь начинается та самая магия. С помощью jQuery скрипта мы будем показывать блок с информацией в зависимости от выбранного значения SELECT. Плюс ко всему, запишем наш выбор в LOCAL STORAGE (локальное хранилище браузера — «аналог» cookies, который позволит запомнить выбор пользователя при перезагрузке страницы или перехода на другую страницу нашего сайта):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> <!-- $( function() { if (localStorage.getItem("myKey")) { var stored_select = localStorage.getItem("myKey"); $('#' + stored_select).prop( "selected", true ); $('.' + stored_select).show(); } else { $('.chelyabinsk').show(); } }); $("#selectItem").change(function(){ $('.containerss').find('div').hide(); var selected = $('#selectItem option:selected').attr('id'); localStorage.setItem("myKey", selected); $('.' + selected).show(); }); --> </script> |
В общем-то всё! Размещаем код, сохраняем и любуемся. Если будут вопросы — пишите в комментарии.
ТЕСТ:
Огромное спасибо за рецепт — я прям воспрял духом решая проблему «Выбор города» на простеньком сайте.
Но никак не получается с помощью предложенного подхода решить задачу «выбрал город в одном блоке страницы — в остальных (двух) блоках отображается сделанный выбор».
Т.е. на одной странице работают три копии этого скрипта (и работают хорошо), но работают независимо (каждая копия использует свою запись «LocalStorage» — иначе у меня не получилось).
А мне позарез нужен функционал «пользователь выбрал город один раз и его выбор отображается в трёх блоках каждой страницы сайта с возможностью поменять город в каждом из блоков» (блоки «город + соответствующий номер телефона» повторяются на всех страницах сайта по три раза).
Здравствуйте. Хочу по благодарить за данный код. Было бы круто если бы изначально город автоматически определялся
Автоматический выбор города — это, на самом деле, плохо. Представьте, робот зайдёт на сайт. Что ему будет отдано?
Спасибо, отличная статья. Вот только не могу разобраться с выводом. Выпадающий список городов появляется, а вот номера телефонов и города при выборе из списка нигде не отображаются? Подскажите как их выводить?
Скопируйте все строки из примера себе и посмотрите как работает. Обратите внимание на стили.
Скорее всего у вас конфликт в скриптах.
Благодарю за ответ. Изначально скопировал все строки вашего примера. И помимо выпадающего меню с городами ничего не отображается. Стили смотрел, конфликтов нет.
Как считаете в чем еще может быть загвоздка?
Спасибо разобрался, проблема была в jquerry.
Подключил для теста
и всё заработало на УРА!
Благодарю за статью!!!
Не могу скопировать скрипт
Исправили, пробуйте!
Таракан всё время отвлекает(((
Очень жаль.. прикольная ведь штука)
хороший скрипт все работает, но на сайте отображается слева, хотелось чтобы отображался по центру.
задайте стили
Я на платформе wordpress делаю, и у меня при выборе города не отображается информация, что я делаю не так? Ещё вопрос, можно ли эту таблицу синхронизировать с яндекс картой, чтоб при выборе города из списка яндекс карта открывала необходимый город?
есть идея вставить в , либо .
Буду очень благодарен за помощь