根据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

倾听变化事件并做一些逻辑：

$("#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>