javascript - 通过 jQuery 将 3 个下拉列表限制为 8 个

Question

我有 3 个下拉菜单，每个下拉菜单有 8 个选项。现在我的目标是将这 3 个下拉列表的组合值限制为 8。因此，例如，如果您在第一个中选择 7，则您只能在接下来的两个中选择 1，如果您在第二个中选择 1，则您不能在第二个中选择任何内容第三。

我试图通过禁用某些选项来实现我的目标，但我的逻辑存在缺陷。一旦我选择了一个选项，我就无法更改我选择的选项，因为我已经禁用了这些选项。任何人都知道我该如何解决这个问题？

提前致谢。

这是一个 jsfiddle 作为我的代码示例:

https://jsfiddle.net/k7krx87L/4/

我的 jQuery 代码:

$(".options select").change(function() {
  var value1 = $("#input_1_5").val();
  var value2 = $("#input_1_6").val();
  var value3 = $("#input_1_7").val();
  var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
  var rest = 9-sum;

  $("#input_1_6 > option").slice(rest,9).each(function() {
    $(this).attr("disabled", true);
    });

  var rest2 = rest - 9
  $("#input_1_7 > option").slice(rest2,9).each(function() {
    $(this).attr("disabled", true);
    });
});

Answer 1

您需要进行变量检查以查看要启用哪些项目

var $selects = $(".options select").change(function() {
  var sum = 0;
  $selects.each(function() {
    sum += +this.value;
  });
  var rem = 9 - sum;

  $selects.each(function() {
    var max = +this.value + rem;
    $(this).find('option').prop('disabled', function() {
      return +this.value > max;
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options">
  <select name="" id="input_1_5">
    <option value="0">0</option>
    <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="" id="input_1_6">
    <option value="0">0</option>
    <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="" id="input_1_7">
    <option value="0">0</option>
    <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>
</div>