时间间隔下拉联动

本文介绍了一种使用JavaScript实现的时间下拉联动效果。当用户从第一个下拉菜单选择开始时间后,第二个下拉菜单会自动更新为相应的时间间隔选项。示例中实现了两小时的固定间隔。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

用JS来控制时间的下拉联动和间隔时间,

第一个下拉框选择开始时间,第二个下拉框自动显示间隔时间。

例子是间隔2个小时,具体需要间隔多少,根据需求而定:下面是代码

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉联动</title>
</head>
<style type="text/css">
	#start,
	#end{
	 width:200px;
	 height:30px;
	 font-size:14px;
	}
</style>
<body>
<form>
	<select id="start"></select>
	<span>——</span>
    <select id="end"></select>
</form>
</body>
</html>
javascript:

<script>
	//准备开始时间
	var starts=["9:00","9:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30"];

		window.onload=function(){
			var start=document.getElementById("start");
			var end=document.getElementById("end");
			
			/*联动开始*/
			start.options[0]=new Option("请选择开始时间","");
			for(var i=0;i<starts.length;i++){
				start.options[i+1]=new Option(starts[i]);
				}
			//开始时间改变联动改变结束时间		
			start.onchange=function(){
				var index1=this.selectedIndex;
				end.options.length=0;
				//生成结束时间
				end.options[0]=new Option("请选择开始时间","");
				if(index1==0){
							end.options.length=0;
							end.options[0]=new Option("请选择开始时间","");
				}else{
					var str=starts[index1-1];
					var str1=":";//:
					var str2=str.substr(0,str.indexOf(str1));//9,10,11,12,13
					var str3=str.substr(str.indexOf(str1));//":00",":30"
					var str4=parseInt(str2)+2;//11,12,13,14,15
					var str5=str4+str3;//11:00,11:30,12:00,12:30,13:00,13:30,14:00,14:30,15:00,15:30					

					end.options[0]=new Option(str5,"");
					}
					end.focus();
				}
				/*联动结束*/
			}
</script>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值