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

   Рассмотрим небольшой пример: нам нужно связать категории статей со статьями.

Добавим select для категорий:

<select id="categories">
  <option value="">Какие статьи мы можем Вам предложить?</option>
  <option value="php-snippets" class="programming">PHP snippets</option>
  <option value="php-oop" class="programming">PHP ООП</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="php-images-and-watermarks" class="php-work-with-images php-oop ">Примеры скриптов</option>
</select>

   Где:

  • select id="category" – родительский список;
  • select id="articles" – зависимый (подчиненный, дочерний) список, значения которого формируются в зависимости от выбора посетителя в родительском списке select id="category";

   Чтобы связать между собою варианты выбора значений в родительском списке select id="category" со значениями в зависимом списке select id="articles", достаточно ко всем значениям option зависимого списка select id="articles" добавить css класс,равный значению option value из родительского списка select id="category".

   То есть с категорией PHP snippets option value="php-snippets" из выпадающего списка категорий select id="categories" будут связаны все статьи с классом option class="php-snippets" из выпадающего списка статей select id="articles".

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

   То есть, если мы хотим привязать статью Примеры скриптов одновременно и к категории PHP snippets, и к категории PHP ООП, тогда атрибут class для тега option Примеры скриптов будет выглядеть следующим образом: option class="php-work-with-images php-oop ".

   После того, как html код связанных select готов и сформирован, нам остается только инициализировать сам плагин:

 jQuery(document).ready(function(){
jQuery("#articles").chained("#categories");
});

   Мы передаем jQuery зависимый (подчиненный) select id="articles", содержимое выпадающего списка которого будет зависеть от выбора посетителем опций родительского выпадающего списка select id="categories", id которого мы передаем плагину chained selects как аргумент функции chained:

jQuery("#articles").chained("#categories");

Также можно увязать между собою таким же образом неограниченное число select ов.

   Часто нам для принтеров нужны качественные чернила, что бы быстро сохли и не растекались, часто покупал чернила для epson через интернет, это дешевле чем в магазинах, а качество такое же поэтому бояться покупать в интернет магазинах не стоит.

   В нашем примере, приведенном в первой части статьи, между собою связаны три выпадающих списка, вначале опции зависимого select id="categories" с родительскими опциями select id="programming", а затем опции зависимого select id="articles" с опциями родительского select id="categories":

jQuery(document).ready(function(){
jQuery("#categories").chained("#programming");
                 jQuery("#articles").chained("#categories");
});

   Что с производительностью и быстродействием плагина jQuery Chained Selects? В одной из своих работ мне пришлось столкнуться с этим плагином, когда он использовался для связи между собою около 2-3 тысяч опций связанных выпадающих списков при формировании связанных опций в opencart. В целом плагин справляется со своей задачей.

   Какие плюсы использования plugin chained selects для формирования связанны опций?

  1. Нет необходимости формировать дополнительный код для хранения отдельных скрытых выпадающих списков select, связанных между собою.
  2. Простая конфигурация, достаточно связать value родительских тегов option с class зависимых тегов option в связанных select.
  3. Возможность связать одну и ту же опцию зависимого списка выбора с несколькими вариантами выбора родительского списка.
  4. Возможность получать содержимое связанных зависимых выпадающих списков при помощи ajax, привязать зависимый список к вариантам выбора нескольких родительских списков (пример приведен в статье разработчика)
  5. Удобство получения и отправки данных на сторону сервера (не нужно дополнительного javascript кода для формирования переменных, или обходить массивы переменных со стороны сервера, достаточно просто обратиться по имени атрибута name связанных выпадающих списков и получить данные для дальнейшей обработки)

   Первая часть статьи о формировании связанных между собою списков select при помощи jQuery плагина Chained Options находится здесь.

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

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

Комментарии   

 
0 #5 Міша 17.03.2014 20:30
Цитирую Prosto-Chups:
Подскажите, как сделать так, чтобы при выборе "option" из последнего "select" происходил переход на новую страницу, указанную в "value".


Название
Цитировать
 
 
0 #4 Prosto-Chups 23.04.2013 05:50
Подскажите, как сделать так, чтобы при выборе "option" из последнего "select" происходил переход на новую страницу, указанную в "value".
Цитировать
 
 
0 #3 Prosto-Chups 23.04.2013 04:04
Подскажите, как сделать, чтобы при выборе последнего пункта происходил переход на страницу?
Цитировать
 
 
0 #2 Administrator 16.02.2013 21:13
Цитирую Денис:
Подскажите пожалуйста в какой файл в ocStore 1.5.1.3 лучше внести эти связанные списки

Для ocStore, opencart есть решение dependent selects - которое позволяет связать опции товара для добавления в корзину согласно выбранным уровням атрибутов товаров с определенным набором опций на основании этого плагина. Можно рассмотреть варианты с организацией фильтров. Все зависит от того, что именно Вы хотите сделать и какова задача?
Цитировать
 
 
-1 #1 Денис 16.02.2013 17:09
Подскажите пожалуйста в какой файл в ocStore 1.5.1.3 лучше внести эти связанные списки
Цитировать
 

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


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