HTML/JavaScript：两个相互依赖的时间下拉列表
我是js的新手。目前，我创建了两个下拉列表，即“开始时间”和“结束时间”。此下拉列表将以24种格式显示所有小时，间隔为30分钟 根据上述情况，如果我从下拉列表“开始时间”中选择值为“10:00”的时间，则第二个下拉列表将显示大于“10:00”的时间列表 并且，如果未选择第一个下拉列表，则禁用第二个下拉列表 有人能教我吗 下面是我当前的代码HTML/JavaScript：两个相互依赖的时间下拉列表,javascript,php,html,ajax,Javascript,Php,Html,Ajax,我是js的新手。目前，我创建了两个下拉列表，即“开始时间”和“结束时间”。此下拉列表将以24种格式显示所有小时，间隔为30分钟 根据上述情况，如果我从下拉列表“开始时间”中选择值为“10:00”的时间，则第二个下拉列表将显示大于“10:00”的时间列表 并且，如果未选择第一个下拉列表，则禁用第二个下拉列表 有人能教我吗 下面是我当前的代码 <!DOCTYPE html> <html lang="en"> <body> <
<!DOCTYPE html>
<html lang="en">
<body>
<div class="form-group">
<label for="exampleInputCity1">Start Time</label>
<?php get_times( $default = '00:00', $interval = '+30 minutes' )?>
<select class="form-control" id="starttime" name="timeFrom"><?php echo get_times(); ?></select>
</div><br><br>
<div class="form-group">
<label for="exampleInputCity1">End Time</label>
<?php get_times( $default = '00:00', $interval = '+30 minutes' )?>
<select class="form-control" id="endtime" name="timeTo"><?php echo get_times(); ?></select>
</div>
<!-- Function to call time -->
<?php
function get_times( $default = '00:00', $interval = '+30 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;
}
?>
</body>
</html>
您可以使用jquery进行此操作。修改后的代码为：
<!DOCTYPE html>
<html lang="en">
<body>
<div class="form-group">
<label for="exampleInputCity1">Start Time</label>
<?php get_times( $default = '00:00', $interval = '+30 minutes' )?>
<select class="form-control" id="starttime" name="timeFrom"><?php echo get_times(); ?></select>
</div><br><br>
<div class="form-group">
<label for="exampleInputCity1">End Time</label>
<?php get_times( $default = '00:00', $interval = '+30 minutes' )?>
<select class="form-control" id="endtime" name="timeTo" disabled=""><?php echo get_times(); ?></select>
</div>
<!-- Function to call time -->
<?php
function get_times( $default = '00:00', $interval = '+30 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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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>
</body>
</html>
默认情况下，禁用“结束时间”下拉列表。一旦更改开始时间，调用javascript函数以启用结束时间下拉列表。试试下面的代码
<!DOCTYPE html>
<html lang="en">
<body>
<div class="form-group">
<label for="exampleInputCity1">Start Time</label>
<?php get_times( $default = '00:00', $interval = '+30 minutes' ); ?>
<select class="form-control" id="starttime" name="timeFrom" onchange="setEndTime(this.value)">
<option value="">Select Start Time</option>
<?php echo get_times(); ?></select>
</div><br><br>
<div class="form-group">
<label for="exampleInputCity1">End Time</label>
<?php get_times( $default = '00:00', $interval = '+30 minutes' )?>
<select class="form-control" id="endtime" name="timeTo" disabled>
<option value="">Select End Time</option>
<?php echo get_times(); ?></select>
</div>
<!-- Function to call time -->
<?php
function get_times( $default = '00:00', $interval = '+30 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;
}
?>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function setEndTime(start_time){
if(start_time){
$("#endtime").prop('disabled', false);
$('#endtime option').filter(function() {
return $(this).val() <= start_time;
}).prop('disabled', true);
}else{
$("#endtime").prop('disabled', true);
}
}
</script>
</html>
选择class=formcontrolid=endtime name=timeTo disabled>//在页面加载时禁用属性 首先包括jquery库文件。然后包括这个脚本
<script type="text/javascript">
$("#starttime").change(function(){ // on change of selectbox startime
$("#endtime").prop('disabled', false); // it will active endtime selectbox
$("#endtime option").each(function(){ // get all option value of endtime
if($(this).val() <= $("#starttime").val()){
$(this).prop('disabled', true); // compare with starttime and disable if value is less or equal to starttime
}
});
});
</script>
通过使用javascript生成选项，您可以轻松地控制选择选项。 这是我的密码： 作用{ 让时间=[ , '00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30' ]; 让startSelect=document.getElementById'starttime'； 让endSelect=document.getElementById'endtime'； startSelect.addEventListener'change'，=>updateEndSelect； 设置开始选择； 更新选择； 功能设置开始选择{ startOptionHtml=； times.forEachtime=>{ startOptionHtml+=+time+； }; startSelect.innerHTML=startOptionHtml； } 函数updateEndSelect{ 让selectedStartTime=startSelect.value； 让selectedEndTime=endSelect.value； 如果！选择开始时间{ endSelect.disabled=true； }否则{ endSelect.disabled=false； } var-endotionhtml=； times.forEachtime=>{ 选择的var=； 如果时间===selectedEndTime{ 选定='选定'； } 如果时间>选择开始时间{ 内点HTML+=+时间+； } }; endSelect.innerHTML=endionHTML； } }; 开始时间 结束时间
这是带标签的javascript，但您的代码是PHP。您是在寻找PHP解决方案还是JavaScript解决方案？JavaScript。php只是用来获取时间列表的函数