title: In <select> <option> element stays visible after one <option> has been clicked
body: <p>this is my first question here on StackOverflow so please correct me if there is anything wrong with this question:</p>
  <p>Three  elements should show  elements based on the what was chosen in the previous  element.</p>
  <p>I've created the following HTML/Twig structure</p>
  <pre><code>&lt;div class=&quot;categorySelector border-two-pixel-solid&quot; id=&quot;categorySelector&quot; style=&quot;display:block; background: white;&quot;&gt;
              {{ _self.cpitems0(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
              &lt;select class=&quot;categoryElement&quot; id=&quot;typDropdown&quot; style=&quot;display: block;&quot;&gt; 
              &lt;option class=&quot;preselect&quot; value=&quot;&quot; style=&quot;display: block;&quot;&gt;--Please choose an option--&lt;/option&gt;
                  {{ _self.cpitems1(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
              &lt;/select&gt;
              &lt;select class=&quot;categoryElement&quot; id=&quot;geraetDropdown&quot; style=&quot;display: block;&quot;&gt;
              &lt;option class=&quot;preselect&quot; value=&quot;&quot; style=&quot;display: block;&quot;&gt;--Please choose an option--&lt;/option&gt;
              {{ _self.cpitems2(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
              &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>
  <p>This Twig macro generates the options (they are provided by a PHP controller)</p>
  <p><a href="https://i.stack.imgur.com/82KfF.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>This is the jQuery code to show/hide the , assign values to it and so on</p>
  <pre><code>    $(&quot;#typDropdown&quot;).children().click(function(e) {
      e.preventDefault();
      e.stopPropagation();
  
      console.log('before cart clear');
      cart.clearcart();
      console.log('after cart clear');
  
      $curElTyp = $(this).attr(&quot;data-val-two&quot;);
      console.log(&quot;currentElementValue &quot;, $curElTyp);
      $(&quot;#geraetDropdown&quot;).show();
      // jQuery selector is only a string
      // All child categories of clicked parent child show / hide
      $(&quot;#geraetDropdown&quot;).children().not(&quot;#&quot; + $curElTyp,).hide();
      $(&quot;#geraetDropdown&quot;).children(&quot;#&quot; + $curElTyp).show();
      $(&quot;#geraetDropdown&quot;).children(&quot;.preselect&quot;).show();
  
      //curElGeraet = $(&quot;#geraetDropdown&quot;).children(&quot;#&quot; + $curElTyp).children('a').attr('data-val-four');
      //console.log('---- curElGeraet ---- ', curElGeraet);
  });
  </code></pre>
  <p>After an  of a &quot;previous&quot;  has been clicked, the  in the &quot;following&quot;  stays visible although I want the Browser to show the &lt;option class=preselect&quot; --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</p>
  <p><a href="https://i.stack.imgur.com/vGLLo.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>How can I update the  element so that the old text disappears and the new text displays?</p>