@ligisayan

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

Есть 2 выпадающих меню: в первом - выводится марка автомобиля, а во втором, -к каждой марке во вложенности дерева с глубиной data-sf-depth="1", - ее модели. Как сделать списки связанными, чтобы при выборе каждой марки появлялись только ее модели? У меня пока получилось сделать так, что при выборе марки выводятся только модели (но все, а не конкретно ее!), либо не выводится ни одна модель.
5a5f1ca34da27726879692.png
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);
        }
      }
    });
  }
});

<li class="sf-field-taxonomy-ad_cat" data-sf-field-name="_sft_ad_cat" data-sf-field-type="taxonomy" data-sf-field-input-type="select" data-sf-combobox="1" data-sf-term-rewrite="[&quot;http:\/\/site.com\/ad-category\/[0]\/&quot;]">
  <label>
	<select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="">
		<option class="sf-level-0 sf-item-0" data-sf-count="0" data-sf-depth="0" value="">марка а/м</option>
		<option class="sf-level-0 sf-item-32" data-sf-count="1" data-sf-depth="0" value="alfa-romeo">Alfa Romeo</option>
		<option class="sf-level-0 sf-item-19 sf-option-active" selected="selected" data-sf-count="12" data-sf-depth="0" value="audi">Audi</option>		
	</select>
</label>
</li>

<li class="sf-field-taxonomy-ad_cat" data-sf-field-name="_sft_ad_cat" data-sf-field-type="taxonomy" data-sf-field-input-type="select" data-sf-combobox="1" data-sf-term-rewrite="[&quot;http:\/\/site.com\/ad-category\/[0]\/&quot;]">
  <label>
	<select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="">
		<option class="sf-level-0 sf-item-0 sf-option-active" selected="selected" data-sf-count="0" data-sf-depth="0" value="">марка а/м</option>
		<option class="sf-level-0 sf-item-32" data-sf-count="1" data-sf-depth="0" value="alfa-romeo">Alfa Romeo</option>
		<option class="sf-level-1 sf-item-59" data-sf-count="1" data-sf-depth="1" value="156">&nbsp;&nbsp;&nbsp;156</option>
		<option class="sf-level-0 sf-item-19" data-sf-count="10" data-sf-depth="0" value="audi">Audi</option>
		<option class="sf-level-1 sf-item-60" data-sf-count="1" data-sf-depth="1" value="a6c5">&nbsp;&nbsp;&nbsp;A6C5</option>
		<option class="sf-level-1 sf-item-61" data-sf-count="1" data-sf-depth="1" value="a4">&nbsp;&nbsp;&nbsp;A4</option>
		<option class="sf-level-1 sf-item-62" data-sf-count="1" data-sf-depth="1" value="a6">&nbsp;&nbsp;&nbsp;A6</option>
	</select>
</label>
</li>
  • Вопрос задан
  • 334 просмотра
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы