Иногда на сайте нужно добавить несколько связанных списков select, чтобы в зависимости от выбора посетителя в одном из списков, формировался набор связанных значений в следующем. Например: Вы часто сталкиваетесь с этим при регистрации на сайтах и в социальных сетях, интернет-магазинах и форумах. Вам предлагают выбрать страну, после выбора страны рядом становится доступен выбор ее регионов, областей и городов. Причем все это происходит моментально: связанные между собою по смыслу значения меняются на лету в зависимости от Вашего выбора. Или, например, при выборе связанных характеристик товара в интернет магазине по продаже матрасов: размер, связанные с размером чехлы, каркас жесткости и т.п.
Итак, решений для формирования связанных между собою списков много. Но мне особенно понравился плагин jQuery Chained Select.
Как видите, после определенного выбора из выпадающего списка О чем почитать статью? содержимое выпадающего списка Какие статьи мы можем Вам предложить? изменяется согласно выбранному типу статьи, а если выбрать вариант из выпадающего списка Какие статьи мы можем Вам предложить?, то, согласно с Вашим выбором, формируется содержимое списка Статьи.
Как ускорить индексацию сайта в Яндекс и Google, очень важная тема так как любому веб мастеру хочется что бы его сайт как можно быстрей индексировался и продвигался в поисковых системах.
Итак, рассмотрим, как организовать выпадающие связанные списки при помощи jQuery плагина Chained Select.
Немного терминологии:
- Родительский выпадающий список – список, при выборе опций которого изменяется содержимое связанного с ним списка;
- Зависимый, дочерний, подчиненный список – список, содержимое которого зависит от выбора вариантов в родительском списке;
- Выпадающий список – тег select, варианты выбора – значения value тега option;
Приступим к установке плагина jQuery Chained Selects.
Для начала скачаем сам плагин jQuery Chained Selects со страницы ее автора.
Примечание: сам проект Chained Selects и его документация на английском находятся по этому адресу . Github проекта находится здесь.
После этого нужно скачать саму библиотеку jQuery (если она еще не подключена на страницах Вашего проекта) jquery.com
Добавим необходимую верстку:
Предположим, что jQuery и плагин Chained Selects лежат у Вас на сервере в папке /js, если это не так, пропишите свой путь к местоположению этих библиотек:
|
1 2 3 |
<head> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.chained.js"></script> |
После этого добавим минимально необходимую 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 46 47 48 49 50 |
<select id="programming"> <option value="">О чем почитать статью?</option> <option value="programming">О программировании</option> <option value="markup">О верстке</option> <option value="seo">О сео</option> <option value="another-projects">О создании сайтов</option> </select> <select id="categories"> <option value="">Какие статьи мы можем Вам предложить?</option> <option value="php-snippets" class="programming">PHP snippets</option> <option value="php-oop" class="programming">PHP ооп</option> <option value="php-work-with-images" class="programming">PHP - работаем с изображениями</option> <option value="html-5" class="markup">HTML 5</option> <option value="css-3.0" class="markup">CSS 3.0</option> <option value="twitter-bootstrap" class="markup">Twitter Bootstrap</option> <option value="sed" class="seo">SED</option> <option value="promotion-with-articles" class="seo">Продвижение статьями</option> <option value="seo-or-smo" class="seo">SEO или SMO?</option> <option value="cms" class="another-projects">cms</option> <option value="javascript" class="another-projects">javascript</option> </select> <select id="articles"> <option value="">Статьи</option> <option value="what-is-snippets" class="php-snippets">PHP - что такое snippets?</option> <option value="snippets-web-sites" class="php-snippets">PHP snippets - ресурсы?</option> <option value="php5-whats-new" class="php-oop">PHP 5 - что нового?</option> <option value="php-code-templates" class="php-oop">PHP - шаблоны проектрирования</option> <option value="php-uploading-images" class="php-work-with-images">PHP - загружаем изображения</option> <option value="php-images-and-watermarks" class="php-work-with-images">PHP - размещаем watermark</option> <option value="html-5-whats-new" class="html-5">HTML 5 - что новенького?</option> <option value="html-5-working-with-video" class="html-5">HTML 5 - работаем с видео</option> <option value="css-3.0-internet-explorer" class="css-3.0">Internet explorer и CSS 3.0</option> <option value="css-3.0-transitions" class="css-3.0">CSS 3.0 и переходные эффекты</option> <option value="twitter-bootstrap-jquery" class="twitter-bootstrap">Twitter Bootstrap и jQuery</option> <option value="twitter-bootstrap-markup" class="twitter-bootstrap">Twitter Bootstrap html макет</option> <option value="twitter-bootstrap-css" class="twitter-bootstrap">Twitter Bootstrap css</option> <option value="sed-what-is-it" class="sed">Что такое SED?</option> <option value="sed-doorways" class="sed">Дорвеи и доргены</option> <option value="wrote-content-to-the-people" class="promotion-with-articles">Пишите для людей!</option> <option value="working-with-keywords" class="promotion-with-articles">Подбираем ключевые слова</option> <option value="what-is-seo" class="seo-or-smo">Что такое seo?</option> <option value="what-is-smo" class="seo-or-smo">Что такое smo?</option> <option value="wordpress" class="cms">wordpress</option> <option value="joomla" class="cms">joomla</option> <option value=dle" class="cms">dle</option> <option value="mootools" class="javascript">mootools</option> <option value="jquery" class="javascript">jQuery</option> <option value=prototype" class="javascript">prototype</option> <option value=prototype" class="javascript cms">обзорная статья - что такое web site?</option> </select> |
И после разметки добавим нужный javascript код:
|
1 2 3 4 5 6 |
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#categories").chained("#programming"); jQuery("#articles").chained("#categories"); }); </script> |
Вот и все. Наш пример работает.
Источник: awesome-design.com