title: How do I hide select options after or before selected?
body: <p>I have a problem with 2 select dropdowns, these 2 select dropdowns both range from 1 to 10 my problem is that I'm trying to work out how to disable certain options upon selecting an option.</p>
  <p>For instance, If I select 4 from select A then in select B it would need to hide 5,6,7,8,9,10 and only show 1,2,3. If I was to select 8 from Select A then select B would hide 9,10 and show 1,2,3,4,5,6,7, and so on, Im thinking nth-child but how would you hide it dynamically?</p>
  <p>Would I need to grab all the options first then simply find the one im looking for then hide the rest and rebuild the select form or is there a simpler solution,</p>
  <p>Any help would be greatly appreciated.</p>
  <p><a href="https://i.stack.imgur.com/SgOKF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SgOKF.png" alt="Select Boxes" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('select[name="A"]').on('change', function() {
      var selText = $(this).find("option:selected").text();
      
      $('select[name="B"] option:contains(' + selText + ')').hide();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>label {
      margin: 10px;
      display: block;
  }
  select {
      width: 100%;
      padding: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;label&gt;
      Select A:
      &lt;select name="selectA"&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
          &lt;option&gt;6&lt;/option&gt;
          &lt;option&gt;7&lt;/option&gt;
          &lt;option&gt;8&lt;/option&gt;
          &lt;option&gt;9&lt;/option&gt;
          &lt;option&gt;10&lt;/option&gt;
      &lt;/select&gt;
  &lt;/label&gt;
  
  &lt;label&gt;
      Select B:
      &lt;select name="selectA"&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
          &lt;option&gt;6&lt;/option&gt;
          &lt;option&gt;7&lt;/option&gt;
          &lt;option&gt;8&lt;/option&gt;
          &lt;option&gt;9&lt;/option&gt;
          &lt;option&gt;10&lt;/option&gt;
      &lt;/select&gt;
  &lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>