Дерево выбора в Javascript

Question

Я ищу, как я могу сделать дерево выборок в JavaScript, но я могу использовать любую библиотеку (на самом деле я использую JQuery).

Мне не нужно показывать дерево. Мне нужно показать один выбор в HTML (программно) и зависит от щелчка пользователя, я покажу еще один вариант выбора разницы ведьмы в зависимости от значения первого выбора.

Мне нужно сохранить значение щелчка пользователя на каждом шагу.

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

Answer 1

Возьмите эту скрипку в качестве примера

http://jsfiddle.net/mer4ovzb/

HTML будет как этот

<select id ="category"> 

<option class="category">Fruit</option> 
<option class="category">Veg</option> 
<option class="category">Nuts</option> 
<option class="category">Drinks</option> 

</select> 

<select id="subcategory"> 

<option class="fruit veg nuts drink">Product 1</option> 
<option class="drink">Product 2</option> 
<option class="veg nuts drink">Product 3</option> 
<option class="veg nuts">Product 4</option> 

</select> 

CSS

.fruit, .veg, .nuts, .drink { 
    display:none; 
} 

JAVASCRIPT

$(document).ready(function() { 
    $("#category").change(function() { 
     if($(this).val() == "Fruit") { 
     $(".veg").hide(); 
     $(".nuts").hide(); 
     $(".drink").hide(); 
     $(".fruit").show(); 
     } else if($(this).val() == "Veg") { 
     $(".fruit").hide(); 
     $(".nuts").hide(); 
     $(".drink").hide(); 
     $(".veg").show(); 
     } else if($(this).val() == "Nuts") { 
     $(".fruit").hide(); 
     $(".veg").hide(); 
     $(".drink").hide(); 
     $(".nuts").show(); 
     } else if($(this).val() == "Drinks") { 
     $(".fruit").hide(); 
     $(".nuts").hide(); 
     $(".veg").hide(); 
     $(".drink").show(); 
     } 
    }); 

}); 

Позвольте мне знать, если это полезно