Параметры двух select для ajax запроса. Нужен совет
 

Доброго дня! Подскажите пожалуйста как правильно реализовать с точки зрения оптимизации, а то понимаю что расплодил сущностей. Суть в следующем:

1. Есть 4 выпадающих списка. Они зависимые друг от друга. Не могу понять, как правильно организовать отправку выбранных параметров на сервер, т.е. глупо писать на каждый выпадающий список событие change и вызывать аякс запрос с отправкой параметров, а то их 4 штуки получится.

2. Мне хотелось бы сделать таким образом, когда я выбираю последние зависимые выпадающие списки, чтобы считывались все выбранные мною элементы и отсылались единственным ajax запросом. Кнопочку Submit я не использую т.к. задумка именно такая, чтобы при выборе любого из селектов подгружалась инфа которая нашлась в базе по выбранным id-шникам. Ну думаю смысл понятен. Как именно сделать это правильно!? Заранее спасибо, вот код... 2 аякс запроса мне нужны для подгрузки зависимых селектов, наверное это тоже не верно и можно одним справиться... Буду благодарен за любые советы

/** серия - первая */ 
       $( '#series_one' ).on('change', function(){
            $.ajax({
    			data     : 'seriesID='+this.value,
    			url      : "<?=$this->createUrl('/site/SelectComplectation')?>",
    			success  : function(html){                    
                    if(html != '') $('#complectation_one').prop('disabled', false).html(html);
    				else $('#complectation_one').attr('disabled','disabled').html('<option>...</option>');                     
    			}
    		});  
       });
              
       /** серия - вторая */ 
       $( '#series_two' ).on('change', function(){
            $.ajax({
    			data     : 'seriesID='+this.value,
    			url      : "<?=$this->createUrl('/site/SelectComplectation')?>",
    			success  : function(html){                    
                    if(html != '') $('#complectation_two').prop('disabled', false).html(html);
    				else $('#complectation_two').attr('disabled','disabled').html('<option>...</option>');                     
    			}
    		});  
       });
       
       
       /** комплектация серии */ 
       $('#complectation_one').on('change', function(){
            $.ajax({
    			data     : 'complectationID_one='+this.value,
                type     : "POST",
    			url      : "<?=$this->createUrl('/site/SelectOption')?>",
    			success  : function(html){                    
                    if(html != '') $('#tabResult').html(html);              
    			}
    		}); 
       });
       
        /** комплектация серии */ 
       $('#complectation_two').on('change', function(){
            $.ajax({
    			data     : 'complectationID_two='+this.value,
                type     : "POST",
    			url      : "<?=$this->createUrl('/site/SelectOption')?>",
    			success  : function(html){                    
                    if(html != '') $('#tabResult').html(html);              
    			}
    		}); 
       });

espltd,
1) Ничего глупого в таком случае нет. ты же не разом их делаешь
2) Я правильно понял зависимость?

serie_one --> complectation_one
  serie_two --> complectation_two

Если да то
- надо при загрузке страницы делать !один! запрос для заполнения главных селектов.

- При change в главных селектах идет запрос на соответствующую комплектацию. То есть тоже !один! запрос в зависимости от того в каком селекте произведен выбор

- Чтобы реагировать на заполнение всех(не всех) селектов тебе нужно при change в подчиненных селектах проверять значения и если они выбраты, то берешь все значения селектов и отправляешь. То есть тоже !один! запрос.

Это так.

А это как раз то, что позволит серверу определить о чем его просят. Событие onchange всех четырех списков должен обрабатывать один обработчик, который опрашивает сервер, различаются только параметры запроса, которые не сюда data : 'complectationID_one='+this.value, жестко прописывать, а давать эти имена спискам.

Эх, не много можно подробнее... На данный момент у меня есть 2 аякс запроса на заглавные селекты, потому, что мне надо получить 2 параметра, id-шник первого и id-шник второго. Я не могу понять как это можно сделать одним аякс запросом, если у ник id-шники, по которым я вызываю событие разные. Т.е. мне приходиться вешать событие change на '#series_one' и еще на '#series_two', и естественно получается 2 аякс запроса, можно ли как-то одним воспользоваться? Как?

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

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

Если каждый из списков в качестве имени будет иметь имя под которым его данные содержаться в базе (эти имена в списках смещены влево), то:

а) все списки имеют один и тот же обработчик изменения их состояния;
б) обработчик очищает все списки после текущего (источника события);
в) асинхронный запрос отправляет на сервер параметр как this.name=this.value
г) сервер получает данные запрашиваемого списка и возвращает их как JSON;
д) клиент заполняет следующий список по полученным данным.