How to limit options based on a <select> based on another <select>, without changing values

I have two selects, I want to configure them so that only a certain amount of options show in the second select, depending on which first selection is chosen.

I found some code from this post and I've tried to edit it for my situation, as I need too keep the values as they are, because I'm using them in a calculator that needs them like that.

If any one could help me fix/finish this code so it works, it would be much appreciated!

What I'm trying to achieve:

If the user selects combo-x1, bench-x1 option only shows
If the user selects combo-x2, bench-x1 option + bench-x2 option only shows
If the user selects combo-x3, bench-x1 option + bench-x2 + bench-x3 option only shows
If the user selects combo-x4 up to combo-8, all options show

Here is the JSFiddle: https://jsfiddle.net/mbxz186q/

But here is the code so far as well:

$(function() {
  'use strict';

  var savedOpts = "drawer-shelf-combo-x()";
  $('#C7-Drawer-Shelf-Combo').change(function() {

    //Add all options back in;
    if (savedOpts) {
      $('#C7-Under-Drawer-Bench').append(savedOpts);
      savedOpts = "";
    }

    //Return false if blank option chosen;
    if ($(this).val() === "0")
      return false;

    var chosenCreds = parseInt($(this).val());
    console.log(chosenCreds);
    $('#C7-Under-Drawer-Bench option').each(function() {
      var thisCred = parseInt($(this).val());
      console.log(thisCred);
      if (thisCred > chosenCreds) {
        //Remove
        savedOpts += $(this)[0].outerHTML;
        $(this).remove();
      }
    });
    console.log(savedOpts);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div>
    <div>
      <select id="C7-Drawer-Shelf-Combo">
        <option value="">No Drawer/Shelf Combo</option>
        <option value="drawer-shelf-combo-x1">combo-x1</option>
        <option value="drawer-shelf-combo-x2">combo-x2</option>
        <option value="drawer-shelf-combo-x3">combo-x3</option>
        <option value="drawer-shelf-combo-x4">combo-x4</option>
        <option value="drawer-shelf-combo-x5">combo-x5</option>
        <option value="drawer-shelf-combo-x6">combo-x6</option>
        <option value="drawer-shelf-combo-x7">combo-x7</option>
        <option value="drawer-shelf-combo-x8">combo-x8</option>
      </select>
    </div>
  </div>

  <div>
    <div>
      <select id="C7-Under-Drawer-Bench">
        <option value="">No Under Drawer Bench</option>
        <option value="under-drawer-bench-x1">bench-x1</option>
        <option value="under-drawer-bench-x2">bench-x1</option>
        <option value="under-drawer-bench-x3">bench-x1</option>
        <option value="under-drawer-bench-x3">bench-x1</option>
      </select>
    </div>
  </div>
</form>
<br />        
 What I'm trying to achieve:<br />
<br />
If the user selects combo-x1,<br />
bench-x1 option only shows<br />
--<br />
If the user selects combo-x2,<br />
bench-x1 option + bench-x2option only shows<br />
--<br />
If the user selects combo-x3,<br />
bench-x1 option + bench-x2 + bench-x3 option only shows<br />
--<br />
If the user selects combo-x4 up to combo-8,<br />
all options show<br />
--<br />

Thank you!

Solution

Don't need jquery or complex javascript for this, most of it can be done via css:

document.addEventListener("DOMContentLoaded", e =>
{
  'use strict';

  const combo = document.getElementById("C7-Drawer-Shelf-Combo"),
        bench = document.getElementById("C7-Under-Drawer-Bench");

  combo.addEventListener("input", e =>
  {
    /* let CSS know which item selected */
    bench.setAttribute("show", e.target.selectedIndex);

    /* reset second dropdown if selected item no longer available */
    if (e.target.selectedIndex && e.target.selectedIndex < 4 && bench.selectedIndex > e.target.selectedIndex)
      bench.selectedIndex = 0;
  });
});

#C7-Under-Drawer-Bench[show="1"] > option:nth-child(n+3),
#C7-Under-Drawer-Bench[show="2"] > option:nth-child(n+4),
#C7-Under-Drawer-Bench[show="3"] > option:nth-child(n+5)
{
  display: none;
}

<form>
  <div>
    <div>
      <select id="C7-Drawer-Shelf-Combo">
        <option value="">No Drawer/Shelf Combo</option>
        <option value="drawer-shelf-combo-x1">combo-x1</option>
        <option value="drawer-shelf-combo-x2">combo-x2</option>
        <option value="drawer-shelf-combo-x3">combo-x3</option>
        <option value="drawer-shelf-combo-x4">combo-x4</option>
        <option value="drawer-shelf-combo-x5">combo-x5</option>
        <option value="drawer-shelf-combo-x6">combo-x6</option>
        <option value="drawer-shelf-combo-x7">combo-x7</option>
        <option value="drawer-shelf-combo-x8">combo-x8</option>
      </select>
    </div>
  </div>
  <div>
    <div>
      <select id="C7-Under-Drawer-Bench">
        <option value="">No Under Drawer Bench</option>
        <option value="under-drawer-bench-x1">bench-x1</option>
        <option value="under-drawer-bench-x2">bench-x2</option>
        <option value="under-drawer-bench-x3">bench-x3</option>
        <option value="under-drawer-bench-x4">bench-x4</option>
        <option value="under-drawer-bench-x5">bench-x5</option>
      </select>
    </div>
  </div>
</form>
<br />        
 What I'm trying to achieve:<br />
<br />
If the user selects combo-x1,<br />
bench-x1 option only shows<br />
--<br />
If the user selects combo-x2,<br />
bench-x1 option + bench-x2option only shows<br />
--<br />
If the user selects combo-x3,<br />
bench-x1 option + bench-x2 + bench-x3 option only shows<br />
--<br />
If the user selects combo-x4 up to combo-8,<br />
all options show<br />
--<br />

Or via pure javascript:

document.addEventListener("DOMContentLoaded", e =>
{
  'use strict';

  const combo = document.getElementById("C7-Drawer-Shelf-Combo"),
        bench = document.getElementById("C7-Under-Drawer-Bench");

  combo.addEventListener("input", e =>
  {
    for(let i = 0; i < bench.children.length; i++)
      bench.children[i].hidden = e.target.selectedIndex < 4 && i > e.target.selectedIndex;

    /* reset second dropdown if selected item no longer available */
    if (e.target.selectedIndex && e.target.selectedIndex < 4 && bench.selectedIndex > e.target.selectedIndex)
      bench.selectedIndex = 0;
  });
});

<form>
  <div>
    <div>
      <select id="C7-Drawer-Shelf-Combo">
        <option value="">No Drawer/Shelf Combo</option>
        <option value="drawer-shelf-combo-x1">combo-x1</option>
        <option value="drawer-shelf-combo-x2">combo-x2</option>
        <option value="drawer-shelf-combo-x3">combo-x3</option>
        <option value="drawer-shelf-combo-x4">combo-x4</option>
        <option value="drawer-shelf-combo-x5">combo-x5</option>
        <option value="drawer-shelf-combo-x6">combo-x6</option>
        <option value="drawer-shelf-combo-x7">combo-x7</option>
        <option value="drawer-shelf-combo-x8">combo-x8</option>
      </select>
    </div>
  </div>
  <div>
    <div>
      <select id="C7-Under-Drawer-Bench">
        <option value="">No Under Drawer Bench</option>
        <option value="under-drawer-bench-x1">bench-x1</option>
        <option value="under-drawer-bench-x2">bench-x2</option>
        <option value="under-drawer-bench-x3">bench-x3</option>
        <option value="under-drawer-bench-x4">bench-x4</option>
        <option value="under-drawer-bench-x5">bench-x5</option>
      </select>
    </div>
  </div>
</form>
<br />        
 What I'm trying to achieve:<br />
<br />
If the user selects combo-x1,<br />
bench-x1 option only shows<br />
--<br />
If the user selects combo-x2,<br />
bench-x1 option + bench-x2option only shows<br />
--<br />
If the user selects combo-x3,<br />
bench-x1 option + bench-x2 + bench-x3 option only shows<br />
--<br />
If the user selects combo-x4 up to combo-8,<br />
all options show<br />
--<br />