Как организовать вывод многоуровневого selectа?
 

Есть автокаталог объявлений на wordpress, в котором все объявления разбиты по категориям (марки) и уже более конкретным по подкатегориям (модели). Хочу сделать фильтр поиска так, чтобы можно было в первом выпадающем списке выбирать марку авто, к ней подтягивались уже конкретные модели и т.д. как на рисунке

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

<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.by\/ad-category\/[0]\/&quot;]">		
<label>
	<select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="" style="display: none;">
		<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>
	<div class="chosen-container chosen-container-single" style="width: 170px;" title="">
		<a class="chosen-single"><span>Audi</span><div><b></b></div></a>
		<div class="chosen-drop">
			<div class="chosen-search"><input type="text" autocomplete="off"></div>
			<ul class="chosen-results">
				<li class="active-result sf-level-0 sf-item-0" data-option-array-index="0">марка а/м</li>
				<li class="active-result sf-level-0 sf-item-32" data-option-array-index="1">Alfa Romeo</li>
				<li class="active-result result-selected sf-level-0 sf-item-19 sf-option-active" data-option-array-index="2">Audi</li>
			</ul>
		</div>
	</div>
</label>		
</li>

И второй select с иерархией, чтобы можно было сравнивать категории между собой и выводить только дочерние эелементы

<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\/ad-category\/[0]\/&quot;,&quot;http:\/\/site\/ad-category\/[0]\/[1]\/&quot;]">		
<label>
	<select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="" style="display: none;">
		<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-0 sf-item-19" data-sf-count="10" data-sf-depth="0" value="audi">Audi</option>
		<option class="sf-level-1 sf-item-39" data-sf-count="1" data-sf-depth="1" value="a6c5">&nbsp;&nbsp;&nbsp;A6C5</option>
	</select>
	<div class="chosen-container chosen-container-single" style="width: 170px;" title="">
		<a class="chosen-single"><span>марка а/м</span><div><b></b></div></a>
		<div class="chosen-drop">
			<div class="chosen-search"><input type="text" autocomplete="off"></div>
			<ul class="chosen-results">
				<li class="active-result result-selected sf-level-0 sf-item-0 sf-option-active" data-option-array-index="0">марка а/м</li>
				<li class="active-result sf-level-0 sf-item-32" data-option-array-index="1">Alfa Romeo</li>
				<li class="active-result sf-level-0 sf-item-19" data-option-array-index="2">Audi</li>
				<li class="active-result sf-level-1 sf-item-39" data-option-array-index="3">&nbsp;&nbsp;&nbsp;A6C5</li>
			</ul>
		</div>
	</div>
</label>		
</li>

Как организовать сравнение категорий и выводить многоуровневый select в нужном виде?

giwuf,
искать темы зависимые селекты

спасибо, рони
В ходе решения столкнулся с тем, что хоть и задаю вложенным элементам option в select не выводиться с помощью display: none; и он успешно применяется, но эти элементы все равно выводятся.. задаю стилями - тоже самое

<option class="sf-level-0 sf-item-19" data-sf-count="9" data-sf-depth="0" value="audi">Audi</option>
<option class="sf-level-1 sf-item-45" data-sf-count="1" data-sf-depth="1" value="100" style="display: none;">&nbsp;&nbsp;&nbsp;100</option>

window.onload = function() {
		var select1 = document.getElementsByClassName("sf-field-taxonomy-ad_cat")[0].getElementsByClassName("sf-input-select")[0];
		for (var i = 0; i < select1.options.length; i++) {
			if(select1.options[i].classList.contains('sf-level-1')) {
				select1.options[i].style.display = "none";
			}
		} };

giwuf,
только вставка и удаление option, никаких css

рони, как-то так?

select1.remove(select1.options[i]);

зависимые селекты
 

giwuf,
алгоритм зависимых селектов: функция в строке 14

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
  var select = document.querySelector(".sf-input-select"),
      opt = [].slice.call(select.options, 0);
  function optShow(cls) {
    opt.forEach(function(option, i) {
      var parent = option.parentNode;
      if (option.classList.contains(cls) || !i) {
        select.appendChild(option);
      } else {
        if (parent) {
          parent.removeChild(option);
        }
      }
    });
  }
  optShow("sf-level-0"); // optShow("sf-level-1") или  optShow("")
});
  </script>
</head>

<body>
<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:\/\/autogid\/ad-category\/[0]\/&quot;,&quot;http:\/\/autogid\/ad-category\/[0]\/[1]\/&quot;]">
<label>
  <select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="" style="">
    <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-0 sf-item-19" data-sf-count="10" data-sf-depth="0" value="audi">Audi</option>
    <option class="sf-level-1 sf-item-39" data-sf-count="1" data-sf-depth="1" value="a6c5">&nbsp;&nbsp;&nbsp;A6C5</option>
  </select>
  <div class="chosen-container chosen-container-single" style="width: 170px;" title="">
    <a class="chosen-single"><span>марка а/м</span><div><b></b></div></a>
    <div class="chosen-drop">
      <div class="chosen-search"><input type="text" autocomplete="off"></div>
      <ul class="chosen-results">
        <li class="active-result result-selected sf-level-0 sf-item-0 sf-option-active" data-option-array-index="0">марка а/м</li>
        <li class="active-result sf-level-0 sf-item-32" data-option-array-index="1">Alfa Romeo</li>
        <li class="active-result sf-level-0 sf-item-19" data-option-array-index="2">Audi</li>
        <li class="active-result sf-level-1 sf-item-39" data-option-array-index="3">&nbsp;&nbsp;&nbsp;A6C5</li>
      </ul>
    </div>
  </div>
</label>
</li>

</body>
</html>

рони, да, спасибо большое за помощь, но отфильтрованные результаты получаются только в самом selecte, а вывод инфы который выводится в ul, остается неизменным. Поэтому вопрос - фильтровать select или уже непосредственно сам ul ?

<select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="" style="display: none;">
		<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>
	<div class="chosen-container chosen-container-single" style="width: 170px;" title="">
		<a class="chosen-single"><span>Audi</span><div><b></b></div></a>
		<div class="chosen-drop">
			<div class="chosen-search"><input type="text" autocomplete="off"></div>
			<ul class="chosen-results">
				<li class="active-result sf-level-0 sf-item-0" data-option-array-index="0">марка а/м</li>
				<li class="active-result sf-level-0 sf-item-32" data-option-array-index="1">Alfa Romeo</li>
				<li class="active-result result-selected sf-level-0 sf-item-19 sf-option-active" data-option-array-index="2">Audi</li>
			</ul>
		</div>
	</div>

giwuf,
не знаю как у вас всё устроено, поэтому даже не понимаю, о чём вы спросили.

рони, смотрите - это код selecta, состоящий из 2ух частей:
первая - между <select></select> изначальная
вторая - между <ul></ul> куда попадают стилизованный и отформатированный select

<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.by\/ad-category\/[0]\/&quot;]">		
<label>
	<select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="" style="display: none;">
		<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>
	<div class="chosen-container chosen-container-single" style="width: 170px;" title="">
		<a class="chosen-single"><span>Audi</span><div><b></b></div></a>
		<div class="chosen-drop">
			<div class="chosen-search"><input type="text" autocomplete="off"></div>
			<ul class="chosen-results">
				<li class="active-result sf-level-0 sf-item-0" data-option-array-index="0">марка а/м</li>
				<li class="active-result sf-level-0 sf-item-32" data-option-array-index="1">Alfa Romeo</li>
				<li class="active-result result-selected sf-level-0 sf-item-19 sf-option-active" data-option-array-index="2">Audi</li>
			</ul>
		</div>
	</div>
</label>		
</li>

giwuf,
не понимаю, но может вы хотели так

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
  var select = document.querySelector(".sf-input-select"),
      opt = [].slice.call(select.options, 0),
      ul =  document.querySelector(".chosen-results")
      li = [].slice.call(ul.querySelectorAll("li"), 0)

  function optShow(cls) {
    opt.forEach(function(option, i) {
      var parent = option.parentNode;
      if (option.classList.contains(cls) || !i) {
        select.appendChild(option);
      } else {
        if (parent) {
          parent.removeChild(option);
        }
      }
    });
    li.forEach(function(el, i) {
      var parent = el.parentNode;
      if (el.classList.contains(cls) || !i) {
        ul.appendChild(el);
      } else {
        if (parent) {
          parent.removeChild(el);
        }
      }
    });

  }
  optShow("sf-level-0"); // optShow("sf-level-1") или  optShow("")
});
  </script>
</head>

<body>
<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:\/\/autogid\/ad-category\/[0]\/&quot;,&quot;http:\/\/autogid\/ad-category\/[0]\/[1]\/&quot;]">
<label>
  <select data-combobox="1" name="_sft_ad_cat[]" class="sf-input-select" title="" style="">
    <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-0 sf-item-19" data-sf-count="10" data-sf-depth="0" value="audi">Audi</option>
    <option class="sf-level-1 sf-item-39" data-sf-count="1" data-sf-depth="1" value="a6c5">&nbsp;&nbsp;&nbsp;A6C5</option>
  </select>
  <div class="chosen-container chosen-container-single" style="width: 170px;" title="">
    <a class="chosen-single"><span>марка а/м</span><div><b></b></div></a>
    <div class="chosen-drop">
      <div class="chosen-search"><input type="text" autocomplete="off"></div>
      <ul class="chosen-results">
        <li class="active-result result-selected sf-level-0 sf-item-0 sf-option-active" data-option-array-index="0">марка а/м</li>
        <li class="active-result sf-level-0 sf-item-32" data-option-array-index="1">Alfa Romeo</li>
        <li class="active-result sf-level-0 sf-item-19" data-option-array-index="2">Audi</li>
        <li class="active-result sf-level-1 sf-item-39" data-option-array-index="3">&nbsp;&nbsp;&nbsp;A6C5</li>
      </ul>
    </div>
  </div>
</label>
</li>

</body>
</html>

рони, да! только единственное важное, что вам не сообщил - список chosen-results изначально пуст и заполняется только в момент раскрытия sf-input-select.
Повесил обработчик onclick на ul

ul.onclick = function() {
    optShow("sf-level-0"); // optShow("sf-level-1") или  optShow("");
	console.log("click");
  };

Результат отфильтровало, НО! только в закрытом состоянии. При открытии списка, вывод перезаписывается на изначальный и уже при выборе снова отфильтровывается так, как надо (получается все процессы остаются невидимыми для пользователя).
Рабобрался, что в этом виноват класс chosen-with-drop, который то появляется, то исчезает в блоке

<div class="chosen-container chosen-container-single chosen-container-active chosen-with-drop" style="width: 170px;" title="">

Руководит этим делом библиотека Chosen/ и код выгдядит так:

Chosen.prototype.results_show = function() {
      if (this.is_multiple && this.max_selected_options <= this.choices_count()) {
        this.form_field_jq.trigger("chosen:maxselected", {
          chosen: this
        });
        return false;
      }
      this.container.addClass("chosen-with-drop");
      this.results_showing = true;
      this.search_field.focus();
      this.search_field.val(this.search_field.val());
      this.winnow_results();
      return this.form_field_jq.trigger("chosen:showing_dropdown", {
        chosen: this
      });
    };


    Chosen.prototype.results_hide = function() {
      if (this.results_showing) {
        this.result_clear_highlight();
        this.container.removeClass("chosen-with-drop");
        this.form_field_jq.trigger("chosen:hiding_dropdown", {
          chosen: this
        });
      }
      return this.results_showing = false;
    };

Можно как-то привязаться по триггеру и отфильтровать так, как планировал изначально?

Решил изменить и привести все в упрощенный вид. Теперь просто сравниваю первый (марки) и второй (марки и модели, которые лежат глубже по дереву) список на наличие совпадений и выводе моделей только для выбранной марки, но никак не получается этого сделать, т.к. связи марок с моделями как таковой нет и пока у меня при выборе выводятся абсолютно все модели

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="a6c5">&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="a6c5">&nbsp;&nbsp;&nbsp;A4</option>
		<option class="sf-level-1 sf-item-62" data-sf-count="1" data-sf-depth="1" value="a6c5">&nbsp;&nbsp;&nbsp;A6</option>
	</select>
</label>
</li>

giwuf,
не осилил и мне сложно понять, зачем нужны все атрибуты в option , кроме value.

Эти атрибуты берутся из динамически подтягиваемых данных. Я пытаюсь пока выкрутиться через nextElementSibling, т.к. четкой связи между списками нет

if (option.value == value) {
    subling = option.nextElementSibling;
}

пока достиг только промежуточных результатов

UPD:
мне помогли прийти вот к такому решению, но оно на jquery
и при переносе получаю такую ошибку