我有三个下拉框。我的第一个下拉选择框如下所示
<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上的最佳解决方案。
监听更改事件并执行以下逻辑：
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>