JS：當第一個選擇選項值為“選擇開始時間”時禁用第二個選擇選項

Question

基於我上面的問題，場景是這樣的：

1) 當我單擊“開始時間”並選擇任何時間時，“結束時間”將啟用。 當我選擇“結束時間”的任何時間時，然后單擊返回“開始時間”並選擇“選擇開始時間”，“結束時間”仍然啟用並仍然顯示我之前選擇的值。 因此。 我想要的是我想要清除“結束時間”值並禁用它。

以下是我當前的代碼：

  <div class="form-group">
  <label>Start Time</label>
  <?php get_times( $default = '00:00', $interval = '+5 minutes' ); ?>
  <select class="form-control" id="starttime" name="timeFrom" required>
    <option value="">Select Start Time</option>
    <?php echo get_times(); ?></select>
  </div>
  <div class="form-group">
    <label>End Time</label>
    <?php get_times( $default = '00:00', $interval = '+5 minutes' )?>
    <select class="form-control" id="endtime" name="timeTo" disabled>
      <?php echo get_times(); ?></select>
  </div>

<?php
    function get_times( $default = '00:00', $interval = '+5 minutes' ) {
        $output = '';
        $current = strtotime( '00:00' );
        $end = strtotime( '23:59' );

        while( $current < $end ) {
            $time = date( 'H:i:s', $current );
            $sel = ( $time == $default ) ? ' selected' : '';
            $output .= "<option value=\"{$time}\"{$sel}>" . date( 'H:i', $current ) . '</option>';
            $current = strtotime( $interval, $current );
        }
        return $output;
    }
?>

<script>
    $('#starttime').change(function(){
      var starttime = $(this).val();
      console.log(starttime);
      $('#endtime option').each(function(){
        if($(this).text() < starttime){
          $(this).remove();
        }
      });
      $('#endtime').removeAttr('disabled')
    })
</script>

誰能知道如何解決它？

Answer 1

即使您按照您要求的方式完成這項工作，我認為您仍然會遇到問題，因為您正在從結束時間選擇中刪除選項，但您從未將它們放回原處。 因此，如果有人在您的開始時間選擇中選擇最后一個選項，然后再次選擇“選擇開始時間”，那么您的結束時間選擇將為空。 因此，基本上每次開始時間更改時，您都需要將選項添加回結束時間選擇，然后刪除結束時間中小於開始時間的選項。

例如

https://jsbin.com/poruyuwovo/1/edit?html,js,console,output

在您的代碼中，它將是這樣的。

  <div class="form-group">
  <label>Start Time</label>
  <?php get_times( $default = '00:00', $interval = '+5 minutes' ); ?>
  <select class="form-control" id="starttime" name="timeFrom" required>
    <option value="">Select Start Time</option>
    <?php echo get_times(); ?></select>
  </div>
  <div class="form-group">
    <label>End Time</label>
    <?php get_times( $default = '00:00', $interval = '+5 minutes' )?>
    <select class="form-control" id="endtime" name="timeTo" disabled>
      <?php echo get_times(); ?></select>
  </div>

<?php
    function get_times( $default = '00:00', $interval = '+5 minutes' ) {
        $output = '';
        $current = strtotime( '00:00' );
        $end = strtotime( '23:59' );

        while( $current < $end ) {
            $time = date( 'H:i:s', $current );
            $sel = ( $time == $default ) ? ' selected' : '';
            $output .= "<option value=\"{$time}\"{$sel}>" . date( 'H:i', $current ) . '</option>';
            $current = strtotime( $interval, $current );
        }
        return $output;
    }
?>



 <script id="select_options" type="text/html">
    <?php echo get_times(); ?>
  </script>

<script>
function endtimeUpdate(){
  var $endtime = $('#endtime');
  var starttime = $('#starttime').val();
  console.log(starttime);

  $endtime.find('option').remove();
  $endtime.html($('#select_options').html());

  if(starttime == ''){    
    $endtime.prop('disabled', true);    
  }
  else {
    $endtime.prop('disabled', false);    
     $endtime.find('option').each(function(){
      if($(this).text() < starttime){
        $(this).remove();
      }
    });
  }  
}

$('#starttime').change(endtimeUpdate);
</script>