title: Is there a better way to condense these <select> pairs, of two types?
body: <p>I'm wanting to see if there's a better way to write this, solely in Javascript.</p>
  <p>There are two kinds of sets, the first set (C7, T7, C11, T11) have four options in the first select, and then up to two options in the second set.</p>
  <p>The second set (14X, 17X) have eight options in the first select, and then up to four options in the second set.</p>
  <p>Note, I can't change the values as these are being used for a calculator.</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>//Set C7
  document.addEventListener("DOMContentLoaded", e =&gt; {
    'use strict';
  
    const combo = document.getElementById("C7-Drawer-Shelf-Combo"),
      bench = document.getElementById("C7-Under-Drawer-Bench");
  
    combo.addEventListener("input", e =&gt; {
      for (let i = 0; i &lt; bench.children.length; i++)
        bench.children[i].hidden = e.target.selectedIndex &lt; 2 &amp;&amp; i &gt; e.target.selectedIndex;
  
      if (e.target.selectedIndex &amp;&amp; e.target.selectedIndex &lt; 2 &amp;&amp; bench.selectedIndex &gt; e.target.selectedIndex)
        bench.selectedIndex = 0;
    });
  });
  
  // Set T7
  document.addEventListener("DOMContentLoaded", e =&gt; {
    'use strict';
  
    const combo = document.getElementById("T7-Drawer-Shelf-Combo"),
      bench = document.getElementById("T7-Under-Drawer-Bench");
  
    combo.addEventListener("input", e =&gt; {
      for (let i = 0; i &lt; bench.children.length; i++)
        bench.children[i].hidden = e.target.selectedIndex &lt; 2 &amp;&amp; i &gt; e.target.selectedIndex;
  
      if (e.target.selectedIndex &amp;&amp; e.target.selectedIndex &lt; 2 &amp;&amp; bench.selectedIndex &gt; e.target.selectedIndex)
        bench.selectedIndex = 0;
    });
  });
  
  // Set C11
  document.addEventListener("DOMContentLoaded", e =&gt; {
    'use strict';
  
    const combo = document.getElementById("C11-Drawer-Shelf-Combo"),
      bench = document.getElementById("C11-Under-Drawer-Bench");
  
    combo.addEventListener("input", e =&gt; {
      for (let i = 0; i &lt; bench.children.length; i++)
        bench.children[i].hidden = e.target.selectedIndex &lt; 2 &amp;&amp; i &gt; e.target.selectedIndex;
  
      if (e.target.selectedIndex &amp;&amp; e.target.selectedIndex &lt; 2 &amp;&amp; bench.selectedIndex &gt; e.target.selectedIndex)
        bench.selectedIndex = 0;
    });
  });
  
  // Set T11
  document.addEventListener("DOMContentLoaded", e =&gt; {
    'use strict';
  
    const combo = document.getElementById("T11-Drawer-Shelf-Combo"),
      bench = document.getElementById("T11-Under-Drawer-Bench");
  
    combo.addEventListener("input", e =&gt; {
      for (let i = 0; i &lt; bench.children.length; i++)
        bench.children[i].hidden = e.target.selectedIndex &lt; 2 &amp;&amp; i &gt; e.target.selectedIndex;
  
      if (e.target.selectedIndex &amp;&amp; e.target.selectedIndex &lt; 2 &amp;&amp; bench.selectedIndex &gt; e.target.selectedIndex)
        bench.selectedIndex = 0;
    });
  });
  
  // Set 14X
  document.addEventListener("DOMContentLoaded", e =&gt; {
    'use strict';
  
    const combo = document.getElementById("14X-Drawer-Shelf-Combo"),
      bench = document.getElementById("14X-Under-Drawer-Bench");
  
    combo.addEventListener("input", e =&gt; {
      for (let i = 0; i &lt; bench.children.length; i++)
        bench.children[i].hidden = e.target.selectedIndex &lt; 4 &amp;&amp; i &gt; e.target.selectedIndex;
  
      if (e.target.selectedIndex &amp;&amp; e.target.selectedIndex &lt; 4 &amp;&amp; bench.selectedIndex &gt; e.target.selectedIndex)
        bench.selectedIndex = 0;
    });
  });
  
  // Set 17X
  document.addEventListener("DOMContentLoaded", e =&gt; {
    'use strict';
  
    const combo = document.getElementById("17X-Drawer-Shelf-Combo"),
      bench = document.getElementById("17X-Under-Drawer-Bench");
  
    combo.addEventListener("input", e =&gt; {
      for (let i = 0; i &lt; bench.children.length; i++)
        bench.children[i].hidden = e.target.selectedIndex &lt; 4 &amp;&amp; i &gt; e.target.selectedIndex;
  
      if (e.target.selectedIndex &amp;&amp; e.target.selectedIndex &lt; 4 &amp;&amp; bench.selectedIndex &gt; e.target.selectedIndex)
        bench.selectedIndex = 0;
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;br /&gt; Set C7
  &lt;/div&gt;
  
  &lt;select id="C7-Drawer-Shelf-Combo"&gt;
    &lt;option value=""&gt;No Drawer/Shelf Combo&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x1"&gt;combo-x1&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x2"&gt;combo-x2&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x3"&gt;combo-x3&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x4"&gt;combo-x4&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="C7-Under-Drawer-Bench"&gt;
    &lt;option value=""&gt;No Under Drawer Bench&lt;/option&gt;
    &lt;option value="under-drawer-bench-x1"&gt;bench-x1&lt;/option&gt;
    &lt;option value="under-drawer-bench-x2"&gt;bench-x2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div&gt;
    &lt;br /&gt; Set T7
  &lt;/div&gt;
  
  &lt;select id="T7-Drawer-Shelf-Combo"&gt;
    &lt;option value=""&gt;No Drawer/Shelf Combo&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x1"&gt;combo-x1&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x2"&gt;combo-x2&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x3"&gt;combo-x3&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x4"&gt;combo-x4&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="T7-Under-Drawer-Bench"&gt;
    &lt;option value=""&gt;No Under Drawer Bench&lt;/option&gt;
    &lt;option value="under-drawer-bench-x1"&gt;bench-x1&lt;/option&gt;
    &lt;option value="under-drawer-bench-x2"&gt;bench-x2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div&gt;
    &lt;br /&gt; Set C11
  &lt;/div&gt;
  
  &lt;select id="C11-Drawer-Shelf-Combo"&gt;
    &lt;option value=""&gt;No Drawer/Shelf Combo&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x1"&gt;combo-x1&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x2"&gt;combo-x2&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x3"&gt;combo-x3&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x4"&gt;combo-x4&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="C11-Under-Drawer-Bench"&gt;
    &lt;option value=""&gt;No Under Drawer Bench&lt;/option&gt;
    &lt;option value="under-drawer-bench-x1"&gt;bench-x1&lt;/option&gt;
    &lt;option value="under-drawer-bench-x2"&gt;bench-x2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div&gt;
    &lt;br /&gt; Set T11
  &lt;/div&gt;
  
  &lt;select id="T11-Drawer-Shelf-Combo"&gt;
    &lt;option value=""&gt;No Drawer/Shelf Combo&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x1"&gt;combo-x1&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x2"&gt;combo-x2&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x3"&gt;combo-x3&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x4"&gt;combo-x4&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="T11-Under-Drawer-Bench"&gt;
    &lt;option value=""&gt;No Under Drawer Bench&lt;/option&gt;
    &lt;option value="under-drawer-bench-x1"&gt;bench-x1&lt;/option&gt;
    &lt;option value="under-drawer-bench-x2"&gt;bench-x2&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div&gt;
    &lt;br /&gt; Set 14X
  &lt;/div&gt;
  
  &lt;select id="14X-Drawer-Shelf-Combo"&gt;
    &lt;option value=""&gt;No Drawer/Shelf Combo&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x1"&gt;combo-x1&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x2"&gt;combo-x2&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x3"&gt;combo-x3&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x4"&gt;combo-x4&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x5"&gt;combo-x5&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x6"&gt;combo-x6&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x7"&gt;combo-x7&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x8"&gt;combo-x8&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="14X-Under-Drawer-Bench"&gt;
    &lt;option value=""&gt;No Under Drawer Bench&lt;/option&gt;
    &lt;option value="under-drawer-bench-x1"&gt;bench-x1&lt;/option&gt;
    &lt;option value="under-drawer-bench-x2"&gt;bench-x2&lt;/option&gt;
    &lt;option value="under-drawer-bench-x3"&gt;bench-x3&lt;/option&gt;
    &lt;option value="under-drawer-bench-x3"&gt;bench-x4&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div&gt;
    &lt;br /&gt; Set 17X
  &lt;/div&gt;
  
  &lt;select id="17X-Drawer-Shelf-Combo"&gt;
    &lt;option value=""&gt;No Drawer/Shelf Combo&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x1"&gt;combo-x1&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x2"&gt;combo-x2&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x3"&gt;combo-x3&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x4"&gt;combo-x4&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x5"&gt;combo-x5&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x6"&gt;combo-x6&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x7"&gt;combo-x7&lt;/option&gt;
    &lt;option value="drawer-shelf-combo-x8"&gt;combo-x8&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select id="17X-Under-Drawer-Bench"&gt;
    &lt;option value=""&gt;No Under Drawer Bench&lt;/option&gt;
    &lt;option value="under-drawer-bench-x1"&gt;bench-x1&lt;/option&gt;
    &lt;option value="under-drawer-bench-x2"&gt;bench-x2&lt;/option&gt;
    &lt;option value="under-drawer-bench-x3"&gt;bench-x3&lt;/option&gt;
    &lt;option value="under-drawer-bench-x3"&gt;bench-x4&lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help would be very much appreciated - thank you!</p>
  <p>Also - this is a follow-on from a <a href="https://stackoverflow.com/questions/67963642/how-to-limit-options-based-on-a-select-based-on-another-select-without-chan/67963908#67963908">previous post</a> here if interested:</p>