用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>