如何限制基于一个&lt；选择的选项(&lt；基于另一个&lt；选择的&>)，而不更改值(&lt；SELECT&gt；)-前端问题

How to limit options based on a lt;selectgt; based on another lt;selectgt;, without changing values(如何限制基于一个lt；选择的选项(lt；基于另一个lt；选择的)，而不更改值(lt；SELECTgt；))

本文介绍了如何限制基于一个&lt；选择的选项(&lt；基于另一个&lt；选择的&>)，而不更改值(&lt；SELECT&gt；)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

如果有人能帮我修复/完成这段代码，使其正常工作，我将不胜感激！

我要实现的目标：

如果用户选择COMBO-x1，则BENCH-x1选项仅显示
如果用户选择como-x2，则bench-x1选项+bench-x2选项仅显示
如果用户选择como-x3，则bench-x1选项+bench-x2+bench-x3选项仅显示
如果用户选择COMBO-x4到COMBO-8，则所有选项都显示

这里是JSFdle：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 />

谢谢！

推荐答案

不需要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 />

这篇关于如何限制基于一个&lt；选择的选项(&lt；基于另一个&lt；选择的&>)，而不更改值(&lt；SELECT&gt；)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！