title: more than one option value for a filter in a table js
body: <p>I hope you can give me a little help.
  First of all: I'm not a trained programmer and I teach myself everything, but sometimes it's very tedious not to find a result for several days.</p>
  <p>I am in the process of creating a list with filter options.
  The following options:</p>
  <pre><code>    &lt;select id=&quot;idTyp&quot;&gt;
      &lt;option value=&quot;all&quot;&gt;Alle Typen&lt;/option&gt;
      &lt;option value=&quot;Pflanze&quot;&gt;Pflanze&lt;/option&gt;
      &lt;option value=&quot;Feuer&quot;&gt;Feuer&lt;/option&gt;
      &lt;option value=&quot;Wasser&quot;&gt;Wasser&lt;/option&gt;
      &lt;option value=&quot;Elektro&quot;&gt;Elektro&lt;/option&gt;
      &lt;option value=&quot;Psycho&quot;&gt;Psycho&lt;/option&gt;
      &lt;option value=&quot;Kampf&quot;&gt;Kampf&lt;/option&gt;
      &lt;option value=&quot;Finsternis&quot;&gt;Finsternis&lt;/option&gt;
      &lt;option value=&quot;Metall&quot;&gt;Metall&lt;/option&gt;
      &lt;option value=&quot;Fee&quot;&gt;Fee&lt;/option&gt;
      &lt;option value=&quot;Drache&quot;&gt;Drache&lt;/option&gt;
      &lt;option value=&quot;Farblos&quot;&gt;Farblos&lt;/option&gt;
      &lt;option value=&quot;Trainer (I)&quot; value=&quot;Trainer (A)&quot;&gt;Trainer&lt;/option&gt;
      &lt;option value=&quot;Spezial-Energie&quot;&gt;Spezial-Energie&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id=&quot;idSeltenheit&quot;&gt;
      &lt;option value=&quot;all&quot;&gt;Alle Stufen&lt;/option&gt;
      &lt;option value=&quot;häufig&quot;&gt;häufig&lt;/option&gt;
      &lt;option value=&quot;nicht so häufig&quot;&gt;nicht so häufig&lt;/option&gt;
      &lt;option value=&quot;selten&quot;&gt;selten&lt;/option&gt;
      &lt;option value=&quot;selten, holo&quot;&gt;selten, holo&lt;/option&gt;
      &lt;option value=&quot;ultraselten&quot;&gt;ultraselten&lt;/option&gt;
      &lt;option value=&quot;selten, holo GX&quot;&gt;selten, holo GX&lt;/option&gt;
      &lt;option value=&quot;selten, prisma-stern&quot;&gt;selten, prisma-stern&lt;/option&gt;
      &lt;option value=&quot;selten, regenbogen&quot;&gt;selten, regenbogen&lt;/option&gt;
      &lt;option value=&quot;selten, geheim&quot;&gt;selten, geheim&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input type=&quot;button&quot; onclick=&quot;SearchData();&quot; value=&quot;Filtern&quot; /&gt;
  </code></pre>
  <p>Here is the corresponding JS:</p>
  <pre><code>const table = document.getElementById(&quot;cardListTable&quot;);
  const tr = table.getElementsByTagName(&quot;tr&quot;);
  
  function SearchData() {
  
      var typ = document.getElementById(&quot;idTyp&quot;).value.toUpperCase();
      var seltenheit = document.getElementById(&quot;idSeltenheit&quot;).value.toUpperCase();
  
      for (i = 1; i &lt; tr.length; i++) {
          
          var rowTyp = tr[i].getElementsByTagName(&quot;td&quot;)[2].textContent.toUpperCase();
          var rowSeltenheit = tr[i].getElementsByTagName(&quot;td&quot;)[3].textContent.toUpperCase();
          var isDiplay = true;
  
          if (typ != 'ALL' &amp;&amp; rowTyp != typ) {
              isDiplay = false;
          }
          if (seltenheit != 'ALL' &amp;&amp; rowSeltenheit != seltenheit) {
              isDiplay = false;
          }
  
          if (isDiplay) {
              tr[i].style.display = &quot;&quot;;
          } else {
              tr[i].style.display = &quot;none&quot;;
          }
      }
  }
  </code></pre>
  <p>My problem:
  I would like to take this option</p>
  <pre><code>&lt;option value=&quot;Trainer (I)&quot; value=&quot;Trainer (A)&quot;&gt;Trainer&lt;/option&gt;
  </code></pre>
  <p>include multiple values.
  There are the values ​​Trainer (I) , Trainer (A), Trainer (U), etc. and all should be displayed with the value &quot;Trainer&quot; at the same time.</p>
  <p>What is the best way to do this?</p>
  <p>I really hope for your help.
  Many Thanks</p>