Warning: filemtime() [function.filemtime]: stat failed for /home/www/awesome/data/www/awesome-design.com/templates/beez/js/jquery.chained.js in /home/www/awesome/data/www/awesome-design.com/plugins/system/CacheCssJs/template.php on line 343
Связанные списки select. jQuery Chained Selectes

   Сегодня мы поговорим о формировании связанных списков выбора при помощи jQuery плагина Chained 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, если это не так, пропишите свой путь к местоположению этих библиотек:

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

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Добавить комментарий


Яндекс.Метрика