Главная > Связанный список с jquery

Связанный список с jquery


   Сегодня мы поговорим о формировании связанных списков выбора при помощи jQuery плагина Chained Select.

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

   Давайте посмотрим его действие на примере:

О чем почитать статью? О программировании О верстке О сео О создании сайтов Какие статьи мы можем Вам предложить? PHP snippets PHP ооп PHP - работаем с изображениями HTML 5 связанный CSS 3.0 Twitter Bootstrap SED Продвижение статьями SEO или SMO? cms javascript Статьи PHP - что связанный список с jquery такое snippets? PHP snippets - ресурсы? PHP 5 - что нового? PHP - шаблоны проектрирования PHP - загружаем изображения PHP - размещаем watermark HTML 5 - что новенького? HTML 5 - работаем с видео Internet explorer и CSS 3.0 CSS 3.0 и переходные эффекты Что такое SED? Дорвеи и доргены Пишите для людей! Подбираем ключевые слова Что такое seo? Что такое smo? wordpress joomla dle mootools jQuery prototype обзорная статья - что такое web site?

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

Как ускорить индексацию сайта в Яндекс и 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"}

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

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


Источник: http://awesome-design.com/stati/javascript/svyazannye-spiski-select-jquery-chained-selectes.html


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



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Связанные списки с помощью jQuery - Stack Overflow на русском Выкройка школьного жилета для мальчиков


Связанный список с jquery



Связанный список с jquery



Связанный список с jquery



Связанный список с jquery



Связанный список с jquery



Связанный список с jquery



Связанный список с jquery



Связанный список с jquery



Связанный список с jquery



Связанный список с jquery



Связанный список с jquery



Связанный список с jquery



Связанный список с jquery






ШОКИРУЮЩИЕ НОВОСТИ