在下拉项中共享一个通用值，并在选择时调整该值

Share a common value among dropdown item and adjust the value on selection

本文关键字：选择 调整 共享 一个      更新时间：2023-09-26

我遇到了一种被卡住的情况。事实上，我必须在下拉列表中显示的条件中共享房间可用性，在任何下拉列表中选择后，实际的房间可用性都应该保持。

在javascript 中考虑以下场景

假设我有10个房间，有3个条件，所以我们有3个下拉列表，每个条件的值从1-10开始。

用户可以从任何条件中选择值，所以如果用户从一个下拉列表中选择了5，那么其他下拉列表的值应该只有1-5。如果用户从第二个条件中选择值2，则最终下拉列表应具有最大可选值3。用户可以在10个可用房间内玩游戏，但从所有条件中选择的任何时间最大值都不应超过10。

谁能告诉我怎么做吗？

当您从其中一个下拉列表中选择一个选项时，请从可用总数中减去该值，并从其余下拉列表中禁用这些选项。

$("select").change(function() {
  $("option").prop('disabled', false);
  var select1 = parseInt($("#select1").val(), 10);
  var select2 = parseInt($("#select2").val(), 10);
  if (!isNaN(select1)) {
    var select2_max = 10 - select1;
    $("#select2 option").slice(select2_max + 1).prop('disabled', true);
    $("#select3 option").slice(select2_max + 1).prop('disabled', true);
    if (!isNaN(select2)) {
      var select3_max = select2_max - select2;
      $("#select3 option").slice(select3_max + 1).prop('disabled', true);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="4">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>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="select2">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="4">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>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="select3">
  <option value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="4">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>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

相关文章：