this is my first question here on StackOverflow so please correct me if there is anything wrong with this question:

Three elements should show elements based on the what was chosen in the previous element.

I've created the following HTML/Twig structure

<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>

This Twig macro generates the options (they are provided by a PHP controller)

enter image description here

This is the jQuery code to show/hide the , assign values to it and so on

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

After an of a "previous" has been clicked, the in the "following" stays visible although I want the Browser to show the <option class=preselect" --Please choose an option-- to show. According to the developer console, the .preselect option is display: block; but somehow it doesn't show in the field

enter image description here

How can I update the element so that the old text disappears and the new text displays?