基于javascript中的值显示下拉列表

Question

我有三个下拉框。我的第一个下拉选择框如下所示

<select name="peos" id="peos" class="peos form-control" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8+</option>
        </select>

我的第二个看起来是这样的

<select name="peosone" id="peosone" class="peosone form-control" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8+</option>
        </select>

第三个是这样的

<select name="peostwo" id="peostwo" class="peostwo form-control" >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8+</option>
        </select>

如果从第一个下拉列表中选择值3，则只能从第二个和第三个下拉列表中选择三个选项（即1、2、3）。

该选项的其余部分应禁用或不可选。

如果从第二个下拉列表中选择值2，第三个下拉列表应该只能选择1。（（即3-2）），反之亦然。

类似地，对于第一个下拉框
中选择的所有可能选项值，都应应用相同的逻辑

为我的查询建议javascript或Jquery上的最佳解决方案。

Answer 1

监听更改事件并执行以下逻辑：

null

$("#peos").on("change", function() {
  var currValue = parseInt($(this).val());
  $("#peosone option").each((index, item) => {
    if (parseInt($(item).val()) > currValue) $(item).attr("disabled", "disabled");
  });
  var oneValue = parseInt($("#peosone").val());
  $("#peostwo option").each((index, item) => {
    if (parseInt($(item).val()) > currValue) $(item).attr("disabled", "disabled");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="peos" id="peos" class="peos form-control">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8+</option>
</select>

<select name="peosone" id="peosone" class="peosone form-control">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8+</option>
</select>

<select name="peostwo" id="peostwo" class="peostwo form-control">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8+</option>
</select>