Question

我正在寻找如何在JavaScript中做一个选择树，但我可以使用任何库（实际上我使用的是JQuery）。

我不需要展示树。我需要在HTML中显示一个选择（以编程方式）并且取决于用户点击，我将根据第一个选择的值显示另一个选择女巫不同选项。

我也需要在每一步保存用户点击的值。

我有一个深度高的树，因此我需要8个选择，这取决于前一个选择的值。

Answer 1

以此小提琴为例

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

});

让我知道它是否有用

在Javascript中选择树

1 个答案: