Как организовать вывод многоуровневого 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>