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>

根据javascript中的值显示下拉菜单

1 个答案: