Javascript中的选择树

我在寻找如何在JavaScript中创建选择树，但我可以使用任何库（实际上我使用JQuery）

我不需要给树看。我需要显示一个选择在HTML（编程）和取决于用户点击，我会显示另一个选择开关不同的选项取决于第一次选择的值

我还需要在每一步保存用户单击的值

---

我有一棵具有深度高度的树，因此我需要8次选择，这取决于上一次选择的值。

以这把小提琴为例

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>

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();
      }
   });

});

---

让我知道它是否有用，您到目前为止做了哪些尝试？我们有没有可能看到这棵高度和深度分别为

和
的
树？还有您的尝试吗？嗨，欢迎来到StackOverflow。这个网站是为特定的编程问题。你必须展示你尝试了什么，遇到了什么问题才能得到帮助。你正在寻找级联下拉列表。
$(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();
      }
   });

});