如何在不更改值的情况下基于另一个 <select> 限制基于 <select> 的选项

Question

我有两个 select，我想配置它们以便在第二个 select 中只显示一定数量的选项，具体取决于选择第一个 selection .

我从这个 post 中找到了一些代码，并且我尝试根据我的情况对其进行编辑，因为我也需要保持原样的值，因为我在需要的计算器中使用它们他们就是这样。

如果有人可以帮助我 fix/finish 此代码可以正常工作，将不胜感激！

我想要达到的目标：

如果用户selects combo-x1,bench-x1选项只显示
如果用户select组合-x2，bench-x1选项+bench-x2选项只显示
如果用户select组合-x3，bench-x1选项+bench-x2+bench-x3选项只显示
如果用户 selects combo-x4 到 combo-8，所有选项显示

这是 JSFiddle：https://jsfiddle.net/mbxz186q/

但到目前为止，代码也是如此：

$(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 />

谢谢！

Answer 1

不需要 jquery 或复杂的 javascript，大部分可以通过 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 />

或通过纯 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 />

如何在不更改值的情况下基于另一个 <select> 限制基于 <select> 的选项

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

javascript

structure