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在你的代码中，它会是这样的。&nbsp; <div class="form-group">&nbsp; <label>Start Time</label>&nbsp; <?php get_times( $default = '00:00', $interval = '+5 minutes' ); ?>&nbsp; <select class="form-control" id="starttime" name="timeFrom" required>&nbsp; &nbsp; <option value="">Select Start Time</option>&nbsp; &nbsp; <?php echo get_times(); ?></select>&nbsp; </div>&nbsp; <div class="form-group">&nbsp; &nbsp; <label>End Time</label>&nbsp; &nbsp; <?php get_times( $default = '00:00', $interval = '+5 minutes' )?>&nbsp; &nbsp; <select class="form-control" id="endtime" name="timeTo" disabled>&nbsp; &nbsp; &nbsp; <?php echo get_times(); ?></select>&nbsp; </div><?php&nbsp; &nbsp; function get_times( $default = '00:00', $interval = '+5 minutes' ) {&nbsp; &nbsp; &nbsp; &nbsp; $output = '';&nbsp; &nbsp; &nbsp; &nbsp; $current = strtotime( '00:00' );&nbsp; &nbsp; &nbsp; &nbsp; $end = strtotime( '23:59' );&nbsp; &nbsp; &nbsp; &nbsp; while( $current < $end ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $time = date( 'H:i:s', $current );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $sel = ( $time == $default ) ? ' selected' : '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $output .= "<option value=\"{$time}\"{$sel}>" . date( 'H:i', $current ) . '</option>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $current = strtotime( $interval, $current );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return $output;&nbsp; &nbsp; }?>&nbsp;<script id="select_options" type="text/html">&nbsp; &nbsp; <?php echo get_times(); ?>&nbsp; </script><script>function endtimeUpdate(){&nbsp; var $endtime = $('#endtime');&nbsp; var starttime = $('#starttime').val();&nbsp; console.log(starttime);&nbsp; $endtime.find('option').remove();&nbsp; $endtime.html($('#select_options').html());&nbsp; if(starttime == ''){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $endtime.prop('disabled', true);&nbsp; &nbsp;&nbsp;&nbsp; }&nbsp; else {&nbsp; &nbsp; $endtime.prop('disabled', false);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;$endtime.find('option').each(function(){&nbsp; &nbsp; &nbsp; if($(this).text() < starttime){&nbsp; &nbsp; &nbsp; &nbsp; $(this).remove();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; }&nbsp;&nbsp;}$('#starttime').change(endtimeUpdate);</script>