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

Опубликовано: 5 апреля, 20175 апреля, 2017, автор - Глава 8-ми ушей

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

Содержание

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

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

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

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

<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>

<h3 class="class">Выбор города:</h3>

<option id="chelyabinsk">Челябинск</option>

<option id="moskva">Москва</option>

<option id="piter">Санкт-Петербург</option>

<option id="nnovgor">Нижний Новгород</option>

</select>

<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>

<!--

$( 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>

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

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

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

<select id="selectItem">

<option id="chelyabinsk">Челябинск</option>
<option id="moskva">Москва</option>
<option id="piter">Санкт-Петербург</option>
<option id="nnovgor">Нижний Новгород</option>

</select>

<option id="chelyabinsk">Челябинск</option>

<option id="moskva">Москва</option>

<option id="piter">Санкт-Петербург</option>

<option id="nnovgor">Нижний Новгород</option>

</select>

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

<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>

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

<style>.containerss div {display: none;}</style>

1	<style>.containerss div {display: none;}</style>

Jquery магия

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

<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>

<!--

$( 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>

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

ТЕСТ: