时间间隔下拉联动

最新推荐文章于 2021-04-29 17:51:08 发布

David_黎

最新推荐文章于 2021-04-29 17:51:08 发布

阅读量545

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签：下拉框 javascript 时间间隔

本文链接：https://blog.youkuaiyun.com/sinat_18755913/article/details/50084055

HTML 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用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>