根據我上面的問題，這樣的場景是這樣的：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 回答
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
即使你按照你要求的方式完成了這項工作，我認為你仍然會遇到問題，因為你正在從你的末世選擇中刪除選項，但你永遠不會把它們放回去。因此，如果有人在您的開始時間選擇中選擇最后一個選項，然后再次選擇“選擇開始時間”，則您的結束時間選擇將為空。因此，基本上，每次開始時間更改時，您都需要將這些選項添加回結束時間選擇，然后刪除最終時間中少于開始時間的選項。
例如
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>
- 1 回答
- 0 關注
- 141 瀏覽
添加回答
舉報
0/150
提交
取消