Взаимозависимые select-ы на jQuery

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

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

На одном из сайтов видел калькулятор, в котором использовался плагин решающий данную задачу. Посмотрите готовый пример.

В нем мы изменяем select с идентификатором #categories и в зависимости от его выбора строятся option-ы второго селекта #tab1stavkafield. Во втором списке, все option должны быть построены сразу. Соответствия между селектами идут по value в первом select и class-у в option второго.

После того, как вы скачаете скрипт, для установки вам понадобится подключить библиотеку jQuery и скрипт плагина. Запуск select-соответствий происходит так:

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

где:

• #categories - родительский селект. Значения добавляем в option value.
• #tab1stavkafield - селект, зависимый от родительского. В option добавляем классы, которые должны соответствовать option value родительских элементов.

Таким образом, можно легко сделать взаимозависимые друг от друга списки.