ホーム>source

上記の私の質問に基づいて、このようなシナリオ:

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>
あなたの答え
  • 解決した方法 # 1

    あなたが望む方法でこの作業を行ったとしても、endtime selectからオプションを削除するので問題はまだあると思いますが、元に戻すことはありません。したがって、誰かが開始時間選択の最後のオプションを選択した場合、「選択開始時間」を再度選択すると、終了時間選択は空になります。したがって、基本的には、開始時刻が変更されるたびにオプションを終了時刻選択に追加し直し、開始時刻よりも短い終了時刻のオプションを削除する必要があります。

    例えば

    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>

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ java - オブジェクトがarraylistに存在する場合はカウントを増分し、そうでない場合はオブジェクトをarraylistに追加します