Частенько возникают ситуации, когда для сайта необходимо сделать форму, с помощью которой пользователи смогут выбирать города-представительства и видеть некую специфическую информацию, характерную для выбранного города. В сети есть несколько готовых решений, основанных на платных и бесплатных базах, на 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 делаю, и у меня при выборе города не отображается информация, что я делаю не так? Ещё вопрос, можно ли эту таблицу синхронизировать с яндекс картой, чтоб при выборе города из списка яндекс карта открывала необходимый город?
есть идея вставить в , либо .
Буду очень благодарен за помощь
Здравствуйте! У меня вопрос: я создала скрипт, все хорошо, но перехода нет и выбор города отправляется на новую вкладку. Мне же нужно, чтобы при выборе города, состоялся переход на окно с товаром и ценами для данного города.
Я в этом новичок и женщина к тому же) поэтому можно мне объяснить как для дурака)))
Скрипт отличный, но возникла проблема. Когда вставляю на сайте и смотрю в компьютерной версии — всё супер, отображается всё как надо, но когда перехожу на мобильную версию изначально просто пусто. Ничего не отображается, но стоит переключить значение, то опять всё появляется. Например, у меня стоит изначально Москва и зайдя в мобильную версию, есть строка выбора города, но нет информации, которая должна быть по этому городу, переключаю на Челябинск, всё отлично появляется, переключаю обратно на Москву, теперь по Москве информация есть. Подскажите, плиз, как можно исправить?
Всё, вопрос выше снят, я разобрался )
Здравствуйте.
Подскажите, пожалуйста, как реализовать выбор города не из выпадающего списка (select), а из маркированного (ul)?
Здравствуйте!
Нужно сменить селект на список в виде:
Здравствуйте!
Я на платформе wordpress делаю все по инструкции, и у меня при выборе города не отображается информация: Тел. и Е-маил.
Плагины вырубал, но все без изменения.
Подскажите пожалуйста в чем может быть причина
Здравствуйте!
подскажите пожалуйста все выше решения перепробовал и не какого результат.
сайт на платформе ворд пресс: плагины выключал..
А вот номера телефона все не как не отображаются…
//*Здравствуйте!
подскажите пожалуйста все выше решения перепробовал и не какого результат.
сайт на платформе ворд пресс: плагины выключал..
А вот номера телефона все не как не отображаются…//*
))) проблема решена:
подключил библиотеку п помощью скрипта
вставил скрипт-
в header.php
между тегом
И радуемся)))
Удачи!
Добрый день! Скопировал скрипт, вставил в код сайта доски объявлений. Вроде все нормально, однако после перехода по полям заполнения объявлений начинает виснуть и пишет о загрузке рекламных полей. В чем ошибка, подскажите, пожалуйста..
Андрей, как разобрались? Такая же проблема, при первом открытии сайта пустые блоки, на мобильной версии и на компе тоже
Подскажи пожалуйста в чем проблема? Выходит список городов, но не выходит информация( Добавила в начале
jQuery.noConflict();
(function($){
//
Добрый день! Может кто-нибудь знает решение или подскажет. Нужна такая вот форма: Выбор города: Москва (город в виде ссылки), при нажатии появляется выпадающее окно с другими городами. При выборе другого города выпадающее окно закрывается, проставляется выбранный город и тоже в виде ссылки. И при переходе на другую страницу сохраняется выбранный город.
Помогите пожалуйста, а то собственных знаний к сожалению не хватает
Круто, благодарю!