Вы здесь
Главная > Мой блог > WEB-разработка > Связанные списки select. jQuery Chained Selectes

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

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

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

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

И после разметки добавим нужный javascript код:

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

Источник: awesome-design.com

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

Top