Как связать 2 выпадающих меню между собой по ключу?

#javascript #html #jquery #html_select #фильтры

Есть 2 выпадающих меню: в первом - выводится марка автомобиля, а во втором, -к каждой
марке во вложенности дерева с глубиной data-sf-depth="1"? - ее модели. Как сделать
списки связанными, чтобы при выборе каждой марки появлялись только ее модели? У меня
пока получилось сделать так, что при выборе марки выводятся только модели (но все,
а не конкретно ее!), либо не выводится ни одна модель.





window.addEventListener("DOMContentLoaded", function() {
  var select1 = document.getElementsByClassName("sf-field-taxonomy-ad_cat")[0].getElementsByClassName("sf-input-select")[0],
    select2 = document.getElementsByClassName("sf-field-taxonomy-ad_cat")[1].getElementsByClassName("sf-input-select")[0],
    opt = [].slice.call(select1.options, 0),
    opt2 = [].slice.call(select2.options, 0);
  var value;
  select1.onchange = function() {
    opt.forEach(function(option, i) {
      if (option.selected) {
        value = option.value;
        return false;
      }
    });
    opt2.forEach(function(option, i) {
      var parent = option.parentNode;
      if (option.classList.contains("sf-level-1") || !i) {
        select2.appendChild(option);
      } else {
        if (parent) {
          parent.removeChild(option);
        }
      }
    });
  }
});

  
	
		марка
а/м
		Alfa
Romeo
		Audi		
	




  
	
		марка а/м
		Alfa
Romeo
		   156
		Audi
		   A6C5
		   A4
		   A6
	





    

Ответы

Ответ 1

Я бы немного изменил логику: не стал бы в select с моделями дублировать марки, оставил
бы там только модели и сделал бы этот select недоступным для выбора, пока не выбрана марка.

Связал бы я два select'а следующим образом: моделям задал бы класс, который соответствует
value марки.



$('.cars').change(function(){
   $('.models').prop('selectedIndex', 0); //ощищаем select с моделями при каждом
изменении select'а с марками
   var car = $(this).val(); //получаем value выбранной марки
   if(car != '') { //проверяем, выбрана ли хоть какая-то марка
      $('.models').attr('disabled',false); //открываем select с моделями
      $('.models option').css('display','none'); //сначала скрываем все модели
      $('.models option.'+car).css('display','inline'); //затем открываем те, которые
нам нужны
   }
   else {
      $('.models').attr('disabled',true); //если не выбрана ни одна марка, скрываем
select с моделями
   }
});



  марка а/м
  Alfa Romeo
  Audi
  Nissan







  модель а/м
  156
  A6C5
  A4
  A6
  Juke
  Murano