3-4 взаимозависимых списка (AJAX)

[Absolute]

У тебя на то и связные списки, допускается выбор только одного значения в списке.
5 списков 5 изменений опций = 25 возможных комбинаций.
10 списков 10 опций = 100 возможных комбинаций.

Что-то я не въеду. Как тогда будет выглядеть массив комбинаций (возможных состояний)?

 

[Aglok]

Я щас еще раз просчитал, и понял мы возможно говорим о разных вещах.
Вопрос мы говорим об:
1. одинаковых списках - в каждом списке одинаковые опции?
2. в каждом списке разные опции?
Если второе, тогда то там количество комбинаций для 5 списков 10^5 = 100000 комбинаций, если первый тот там действует принцип взаимоисключаемости.

 

[Anton_Fadeev]

я примерно тоже самое сейчас делаю. Только число селектов не определено. Т.е. может быть и 2, а может быть и 8.
В вашем ТЗ не хватает по крайней мере одной вводной.
Предположим, есть значения. Для простоты размышлений в кажом селекте по 2 оптиона:

select1{ param1, param2}
select2{ param3, param4}
select3{ param5, param6}

Итого 2*2*2 = 8 комбинаций могут быть максимально.
Собственно, комбинации:

param1 => param3 => param5
param1 => param3 => param6
param1 => param4 => param5
param1 => param4 => param6
<-- param2 => param3 => param5 --> --эту исключим.
param2 => param3 => param6
param2 => param4 => param5
param2 => param4 => param6

Так вот, при выборе param3 во втором селекте итоговое состояние селектов будет таким:

select1{ param1 }
select2{ param3, param4 }
select3{ param5, param6 }

или таким:

select1{ param1, param2 }
select2{ param3, param4 }
select3{ param6 }

??
То есть не ясно по какому из соседних селектов строить.
Следующее. Адекватный обход удается построить, если комбинации в многомерном массиве.
Т.е.

var array = [
['param1', 'param1', 'param1'],
['param1', 'param1', 'param2'],
... и т.д.
];

Можно использовать быстрые циклы for/while. Это прокатит, если не так много комбинаций.
Если же у вас например 5 селектов по 10 оптионов в каждом, то выходит
500 тыс. вероятных комбинаций? А если 10 селектов по 10 оптионов? 10 млрд? Я не матан, к сожалению, а практик и вынужден признать мозги вскипают. Как запилить обход объекта, как в коде выше опираясь на значение последнего по уровню ключа так и не придумал.
...И я вот что подумал. Что есть смысл строить массивы комбинаций, производить тысячи итераций, создавать временные массивы, делать туеву хучу сравнений, а потом строить. Если можно сразу начать строить? ...А соответствия писать прямо в HTMLе.
И написал вот этот код в виде плагина JQuery:

(function($){

  jQuery.fn.slipoptions = function(options){
    options = $.extend({
      class:false,
      val:false
    }, options);

var f = function(){
var enData = $(this).children('option[value="'+$(this).val()+'"]').data();
var i;
for(i in enData){
  if(i in f){
    $('.'+i).children('option').remove();
   } else {
      f[i] = $('.'+i).children('option').detach();
   }
      f[i].each(function(){
       var str = $(this).val();
       if(enData[i].indexOf(str)>-1){
        $(this).clone().appendTo($('.'+i));
       }
      });
}
   };
$(this).on('change', f);
    if(options.class){
      if(options.val){
        $('.'+options.class).val(options.val).trigger('change');
       } else {
         $('.'+options.class).trigger('change');
       }
    }
   return this;
};
})(jQuery);

То есть пишем прямо в option, что, при её выборе, будут содержать селекты. Пример:

<select class="selone">
<option data-seltwo="size_s,param_name2,small" data-sel3="size_m,green,verysmall" value="size_xxl">Размер XXL</option>
<option data-selone="red,param_name1" data-seltwo="param_name2,small,size_s" data-sel3="green,verysmall" value="red">Красный</option>
<option data-seltwo="white,small" data-sel3="size_m,green,verysmall" value="param_name1">Name param</option>
<option data-seltwo="param_name2,white" data-sel3="verybig,green,verysmall" value="big">Большой</option>
</select>

<select class="seltwo">
<option data-selone="param_name1,big" data-sel3="verybig,green,verysmall" value="white">Белый</option>
<option data-selone="red,param_name1,big" data-sel3="size_m,green,verysmall" value="param_name2">Имя параметра 2</option>
<option data-selone="red,param_name1" data-sel3="green,verysmall" value="size_s">Размер S</option>
<option data-selone="size_xxl,red,param_name1" data-sel3="size_m,green,verysmall" value="small">Маленький</option>
</select>

<select class="sel3">
<option data-selone="size_xxl,red,param_name1" data-seltwo="white,small,size_s" value="verybig">Очень большой</option>
<option data-selone="param_name1,big" data-seltwo="white,small" value="size_m">Размер M</option>
<option data-selone="red,param_name1,big" data-seltwo="param_name2,small,size_s" value="verysmall">Очень маленький</option>
<option data-selone="red,param_name1" data-seltwo="size_s,small" value="green">Зеленый</option>
</select>

Инициализация:

$(document).ready(function(){
   $('select[class^="sel"]').slipoptions();
});

Если передать:

$('select[class^="sel"]').slipoptions({
class: 'seltwo',
val: 'small'
});

то при загрузке страницы значения селектов будут построены по данным, содержащимся в option со значением small селекта с классом seltwo. Если передать только класс, то значения будут построены по текущему значению селекта с этим классом. Если не передавать этот параметр, то при загрузке страницы никакие селекты исключены не будут. Особого опыта написания плагинов для JQuery у меня нет
Тестил в Opere на вебките, в Opere на Presto, в Лисе, в ie9, Хроме, на мобильных браузерах - работает. А так же с версиями JQuery: 1.7.2, 1.8.3, 1.9.1, 1.11.3, 2.1.4, 3.0.0-alpha1
Важно усвоить, что все <option>, которые могут быть в селекте - должны там быть изначально.

Почти то, что нужно. Попробую привести другой пример.
3 списка:
Город -> Улица -> номер дома

Город:
Москва
доступные улицы и номера домов:
Пушкина 1, 3, 4, 5
Лермонтова 1, 2, 3
Достоевского 4, 6, 7

Город:
Краснодар
доступные улицы и номера домов:
Пушкина 2, 3, 5
Ленина 2, 4, 6

Город:
Новосибирск
доступные улицы и номера домов:
Пушкина 1, 2, 3
Ленина 1, 2, 5
Лермонтова 1, 2, 5


1) Первоначальное положение в каждом - "Не выбрано"
Если выбрать вначале город, во 2-м списке доступны будут только улицы в этом городе, выбранный пункт при этом останется "Не выбрано". В 3-м все номера домов по улицам из 2 списка, также выбранный список не изменится.

2) Если мы выберем в первую очередь Улицу во 2-м списке, то список доступных значений в 1-м изменится (города, где есть такая улица), но выбранное значение так и останется "Не выбрано", и 3-й список также изменит список доступных для выбора опций, при это выбранный пункт так и останется "не выбрано".

3) Аналогично с 3-м списком.

Мы указали значение в одном из списков. Допустим 2-й вариант, мы выбрали сначала улицу "Лермонтова".
Соответственно в списке "города" мы можем выбрать только "Москва" или "Новосибирск". А в списке "Номер дома" будет доступно: 1, 2, 3, 5
Если после выбора "улицы" выбрать "номер дома", например "5", то город выбрать мы можем только "Новосибирск", т.к. в "Москве" такого нет.
Если после "улицы" мы выберем город, например "Новосибирск", то список номеров домов будет "1, 2, 5"

Надеюсь, так понятнее