Связанные списки select. jQuery Chained Selectes

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

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

Сегодня мы поговорим о формировании связанных списков выбора при помощи jQuery плагина Chained Select. Итак, решений для формирования связанных между собою списков много. Но мне особенно понравился плагин jQuery Chained Select. Давайте посмотрим его действие на примере:

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

Итак, рассмотрим, как организовать выпадающие связанные списки при помощи jQuery плагина Chained Select.

Немного терминологии:

Родительский выпадающий список – список, при выборе опций которого изменяется содержимое связанного с ним списка;
Зависимый, дочерний, подчиненный список – список, содержимое которого зависит от выбора вариантов в родительском списке;
Выпадающий список – тег select, варианты выбора – значения value тега option;

Приступим к установке плагина jQuery Chained Selects.

Добавим необходимую верстку:

Предположим, что jQuery и плагин Chained Selects лежат у Вас на сервере в папке /js, если это не так, пропишите свой путь к местоположению этих библиотек:

<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.chained.js"></script>

После этого добавим минимально необходимую html разметку:

<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 код:

<script type="text/javascript">
jQuery(document).ready(function(){
	         jQuery("#categories").chained("#programming");
                 jQuery("#articles").chained("#categories");
});
</script>

Вот и все. Наш пример работает.

А теперь разберем подробно, как работать с плагином jQuery Chained Selects связанных списков и в чем его удобство во второй части статьи.

{uri=»js/jquery.chained.js»}

Поделитесь со своими друзьями