如何限制基于另一个 <select> 的 <select> 的选项，而不更改值答案

【问题标题】：How to limit options based on a <select> based on another <select>, without changing values如何限制基于另一个 <select> 的 <select> 的选项，而不更改值
【发布时间】：2021-06-14 10:05:01
【问题描述】：

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

我从这篇文章中找到了一些代码，并尝试根据我的情况对其进行编辑，因为我也需要保持这些值不变，因为我在需要它们的计算器中使用它们。

如果有人可以帮助我修复/完成此代码以使其正常工作，将不胜感激！

我想要达到的目标：

如果用户选择 combo-x1，则仅显示 bench-x1 选项
如果用户选择 combo-x2，则仅显示 bench-x1 选项 + bench-x2 选项
如果用户选择 combo-x3，则 bench-x1 选项 + bench-x2 + bench-x3 选项仅显示
如果用户选择 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 />

谢谢！

【问题讨论】：

这会有帮助吗？ stackoverflow.com/questions/52725670/…

标签： javascript structure

【解决方案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 />

【讨论】：