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>