这是我在StackOverflow上的第一个问题，如果这个问题有任何错误，请纠正我：

三个元素应该显示基于前一个元素中选择的元素。

我创建了以下HTML/TWIG结构

<div class="categorySelector border-two-pixel-solid" id="categorySelector" style="display:block; background: white;">
            {{ _self.cpitems0(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
            <select class="categoryElement" id="typDropdown" style="display: block;"> 
            <option class="preselect" value="" style="display: block;">--Please choose an option--</option>
                {{ _self.cpitems1(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
            </select>
            <select class="categoryElement" id="geraetDropdown" style="display: block;">
            <option class="preselect" value="" style="display: block;">--Please choose an option--</option>
            {{ _self.cpitems2(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
            </select>
    </div>

这个Twig宏生成选项（它们由PHP控制器提供）

在此输入图像说明

这是jQuery代码，用于显示/隐藏、为其赋值等等

    $("#typDropdown").children().click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    console.log('before cart clear');
    cart.clearcart();
    console.log('after cart clear');

    $curElTyp = $(this).attr("data-val-two");
    console.log("currentElementValue ", $curElTyp);
    $("#geraetDropdown").show();
    // jQuery selector is only a string
    // All child categories of clicked parent child show / hide
    $("#geraetDropdown").children().not("#" + $curElTyp,).hide();
    $("#geraetDropdown").children("#" + $curElTyp).show();
    $("#geraetDropdown").children(".preselect").show();

    //curElGeraet = $("#geraetDropdown").children("#" + $curElTyp).children('a').attr('data-val-four');
    //console.log('---- curElGeraet ---- ', curElGeraet);
});

点击“previous”中的一个后，“following”中的保持可见，尽管我希望浏览器显示