javascript - 使用 prevAll() 时选择时无法正确更新值

Question

我有 2 个选择字段，您可以在其中选择时间，从和到。我想阻止用户在“从”之前选择“到”时间。

问题是，如果您选择“from”08:30，第一次正常工作时，您无法选择低于此值的“to”。但是，如果您将第一个选择再次更改为 07:00，则选择不会更新，您就会陷入困境。您只能从第一个选择中进行选择。

$("#from").change(function() {
  var fromVal = $(this).val();
  var min_time_limit = parseInt(fromVal) + 4;
  $('#to').val(min_time_limit);
  $('#to option[value="' + min_time_limit + '"]').prevAll().prop('disabled', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="cart">
  <select id="from" name="from" class="from">
    <option value="1">07:00</option>
    <option value="2">07:30</option>
    <option value="3">08:00</option>
    <option value="4">08:30</option>
    <option value="5">09:00</option>
    <option value="6">09:30</option>
    <option value="7">10:00</option>
    <option value="8">10:30</option>
    <option value="9">11:00</option>
    <option value="10">11:30</option>
    <option value="11">12:00</option>
    <option value="12">12:30</option>
    <option value="13">13:00</option>
    <option value="14">13:30</option>
    <option value="15">14:00</option>
    <option value="16">14:30</option>
    <option value="17">15:00</option>
    <option value="18">15:30</option>
    <option value="19">16:00</option>
    <option value="20">16:30</option>
    <option value="21">17:00</option>
    <option value="22">17:30</option>
    <option value="23">18:00</option>
    <option value="24">18:30</option>
    <option value="25">19:00</option>
    <option value="26">19:30</option>
    <option value="27">20:00</option>
    <option value="28">20:30</option>
    <option value="29">21:00</option>
    <option value="30">21:30</option>
    <option value="31">22:00</option>
  </select>
  <select id="to" name="to" class="to">
    <option value="1">07:00</option>
    <option value="2">07:30</option>
    <option value="3">08:00</option>
    <option value="4">08:30</option>
    <option value="5">09:00</option>
    <option value="6">09:30</option>
    <option value="7">10:00</option>
    <option value="8">10:30</option>
    <option value="9">11:00</option>
    <option value="10">11:30</option>
    <option value="11">12:00</option>
    <option value="12">12:30</option>
    <option value="13">13:00</option>
    <option value="14">13:30</option>
    <option value="15">14:00</option>
    <option value="16">14:30</option>
    <option value="17">15:00</option>
    <option value="18">15:30</option>
    <option value="19">16:00</option>
    <option value="20">16:30</option>
    <option value="21">17:00</option>
    <option value="22">17:30</option>
    <option value="23">18:00</option>
    <option value="24">18:30</option>
    <option value="25">19:00</option>
    <option value="26">19:30</option>
    <option value="27">20:00</option>
    <option value="28">20:30</option>
    <option value="29">21:00</option>
    <option value="30">21:30</option>
    <option value="31">22:00</option>
  </select>
</form>

请检查 fiddle :https://jsfiddle.net/xzdo324j/2/

Answer 1

问题是因为当您移至较早的 #from 时间时，您永远不会重新启用 option 元素。您需要重新安排逻辑，首先重新启用 #to 选项，然后过滤并禁用 #from 之前的选项。试试这个:

$("#from").change(function() {
  var fromVal = $(this).val();
  var min_time_limit = parseInt(fromVal) + 4;

  var $to = $('#to').val(min_time_limit);
  var $options = $to.children('option').prop('disabled', false);
  $options.filter('[value="' + min_time_limit + '"]').prevAll().prop('disabled', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="cart">
  <select id="from" name="from" class="from">
    <option value="1">07:00</option>
    <option value="2">07:30</option>
    <option value="3">08:00</option>
    <option value="4">08:30</option>
    <option value="5">09:00</option>
    <option value="6">09:30</option>
    <option value="7">10:00</option>
    <option value="8">10:30</option>
    <option value="9">11:00</option>
    <option value="10">11:30</option>
    <option value="11">12:00</option>
    <option value="12">12:30</option>
    <option value="13">13:00</option>
    <option value="14">13:30</option>
    <option value="15">14:00</option>
    <option value="16">14:30</option>
    <option value="17">15:00</option>
    <option value="18">15:30</option>
    <option value="19">16:00</option>
    <option value="20">16:30</option>
    <option value="21">17:00</option>
    <option value="22">17:30</option>
    <option value="23">18:00</option>
    <option value="24">18:30</option>
    <option value="25">19:00</option>
    <option value="26">19:30</option>
    <option value="27">20:00</option>
    <option value="28">20:30</option>
    <option value="29">21:00</option>
    <option value="30">21:30</option>
    <option value="31">22:00</option>
  </select>

  <select id="to" name="to" class="to">
    <option value="1">07:00</option>
    <option value="2">07:30</option>
    <option value="3">08:00</option>
    <option value="4">08:30</option>
    <option value="5">09:00</option>
    <option value="6">09:30</option>
    <option value="7">10:00</option>
    <option value="8">10:30</option>
    <option value="9">11:00</option>
    <option value="10">11:30</option>
    <option value="11">12:00</option>
    <option value="12">12:30</option>
    <option value="13">13:00</option>
    <option value="14">13:30</option>
    <option value="15">14:00</option>
    <option value="16">14:30</option>
    <option value="17">15:00</option>
    <option value="18">15:30</option>
    <option value="19">16:00</option>
    <option value="20">16:30</option>
    <option value="21">17:00</option>
    <option value="22">17:30</option>
    <option value="23">18:00</option>
    <option value="24">18:30</option>
    <option value="25">19:00</option>
    <option value="26">19:30</option>
    <option value="27">20:00</option>
    <option value="28">20:30</option>
    <option value="29">21:00</option>
    <option value="30">21:30</option>
    <option value="31">22:00</option>
  </select>
</form>

另请注意，执行此操作的另一种方法是按索引关联两个选择中的选项，因为值相同:

$("#from").change(function() {
  var toIndex = $(this).children('option:selected').index() + 4;
  var $availableOptions = $('#to option').prop('disabled', false);
  var $selectedOption = $availableOptions.eq(toIndex).prop('selected', true);
  $selectedOption.prevAll().prop('disabled', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="cart">
  <select id="from" name="from" class="from">
    <option value="1">07:00</option>
    <option value="2">07:30</option>
    <option value="3">08:00</option>
    <option value="4">08:30</option>
    <option value="5">09:00</option>
    <option value="6">09:30</option>
    <option value="7">10:00</option>
    <option value="8">10:30</option>
    <option value="9">11:00</option>
    <option value="10">11:30</option>
    <option value="11">12:00</option>
    <option value="12">12:30</option>
    <option value="13">13:00</option>
    <option value="14">13:30</option>
    <option value="15">14:00</option>
    <option value="16">14:30</option>
    <option value="17">15:00</option>
    <option value="18">15:30</option>
    <option value="19">16:00</option>
    <option value="20">16:30</option>
    <option value="21">17:00</option>
    <option value="22">17:30</option>
    <option value="23">18:00</option>
    <option value="24">18:30</option>
    <option value="25">19:00</option>
    <option value="26">19:30</option>
    <option value="27">20:00</option>
    <option value="28">20:30</option>
    <option value="29">21:00</option>
    <option value="30">21:30</option>
    <option value="31">22:00</option>
  </select>

  <select id="to" name="to" class="to">
    <option value="1">07:00</option>
    <option value="2">07:30</option>
    <option value="3">08:00</option>
    <option value="4">08:30</option>
    <option value="5">09:00</option>
    <option value="6">09:30</option>
    <option value="7">10:00</option>
    <option value="8">10:30</option>
    <option value="9">11:00</option>
    <option value="10">11:30</option>
    <option value="11">12:00</option>
    <option value="12">12:30</option>
    <option value="13">13:00</option>
    <option value="14">13:30</option>
    <option value="15">14:00</option>
    <option value="16">14:30</option>
    <option value="17">15:00</option>
    <option value="18">15:30</option>
    <option value="19">16:00</option>
    <option value="20">16:30</option>
    <option value="21">17:00</option>
    <option value="22">17:30</option>
    <option value="23">18:00</option>
    <option value="24">18:30</option>
    <option value="25">19:00</option>
    <option value="26">19:30</option>
    <option value="27">20:00</option>
    <option value="28">20:30</option>
    <option value="29">21:00</option>
    <option value="30">21:30</option>
    <option value="31">22:00</option>
  </select>
</form>