`
chengyue2007
  • 浏览: 1470865 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

时间级联下拉列表框

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>年月日三下拉框联动 </title>
<meta http-equiv='Content-Type' content='text/html; charset=GBK'>
</head>
<body>
<form name=form1>
<select name=YYYY onchange="YYYYMM(this.value)">
<option value="">请选择 年 </option>
</select>
<select name=MM onchange="MMDD(this.value)">
<option value="">选择 月 </option>
</select>
<select name=DD>
<option value="">选择 日 </option>
</select>
</form>
<script language="JavaScript"> <!--
function window.onload()
{
strYYYY = document.form1.YYYY.outerHTML;
strMM = document.form1.MM.outerHTML;
strDD = document.form1.DD.outerHTML;
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//先给年下拉框赋内容
var y = new Date().getFullYear();
var str = strYYYY.substring(0, strYYYY.length - 9);
for (var i = (y-30); i < (y+30); i++) //以今年为准,前30年,后30年
{
str += " <option value='" + i + "'> " + i + " 年" + " </option>\r\n";
}
document.form1.YYYY.outerHTML = str +" </select>";
//赋月份的下拉框
var str = strMM.substring(0, strMM.length - 9);
for (var i = 1; i < 13; i++)
{
str += " <option value='" + i + "'> " + i + " 月" + " </option>\r\n";
}
document.form1.MM.outerHTML = str +" </select>";
document.form1.YYYY.value = y;
document.form1.MM.value = new Date().getMonth() + 1;
var n = MonHead[new Date().getMonth()];
if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
writeDay(n); //赋日期下拉框
document.form1.DD.value = new Date().getDate();
}
function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
{
var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
if (MMvalue == ""){DD.outerHTML = strDD; return;}
var n = MonHead[MMvalue - 1];
if (MMvalue ==2 && IsPinYear(str)) n++;
writeDay(n)
}
function MMDD(str) //月发生变化时日期联动
{
var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
if (str == ""){DD.outerHTML = strDD; return;}
var n = MonHead[str - 1];
if (str ==2 && IsPinYear(YYYYvalue)) n++;
writeDay(n)
}
function writeDay(n) //据条件写日期的下拉框
{
var s = strDD.substring(0, strDD.length - 9);
for (var i=1; i <(n+1); i++)
s += " <option value='" + i + "'> " + i + " 日" + " </option>\r\n";
document.form1.DD.outerHTML = s +" </select>";
}
function IsPinYear(year)//判断是否闰平年
{ return(0 == year%4 && (year%100 !=0 || year%400 == 0))}
//--> </script>
</body>
</html>

分享到:
评论

相关推荐

    zywsetup.rar

    对于级联下拉列表,比如居住区域和服务区域这种下拉列表,因为只有选择了一前一项之后,才会显示下一项的,我们要把间隔时间设置的长一些,比如1500毫秒,对于提交按钮和重新打开志愿者注册链接,我们要把时间设置的...

    web元件库 ElementUI元件库+后台模板页面(支持Axure8及9)

    包含导航、颜色、字体、边框、图标、按钮、文字链接、单选框、多选框、输入框、计数器、选择器、级联选择器、开关、滑块、时间选择器、日期选择器、日期时间选择器、上传、评分、颜色选择器、穿梭框、表单、表格、...

    微信小程序之下拉菜单的三级筛选框

    提供了资料,在此做了二次开发,也分享一下。因为自己最近也需要写个小程序的下拉框的三级菜单筛选,分享给有需要的人哈。...自己也是简单的写了一下,没有花过多的时间在样式上挣扎,哈哈哈。 (三)项目代码

    基于多平台快速开发的UI框架uView UI1.0二次开发的diy-uView-ui,是uni-app生态优秀的UI框架

    导航栏,按钮,标签,表单,单选,复选,下拉选择,多层选择,级联选择,开关,时间轴,模态框,步骤条,头像,进度条,单选复选组件,h5扫码组件,条码组件,二维码组件,抽奖组件,签名组件,气泡弹窗,矩阵评分,矩阵单选,矩阵多选,矩阵...

    web元件库 ElementUI元件库

    包含导航、颜色、字体、边框、图标、按钮、文字链接、单选框、多选框、输入框、计数器、选择器、级联选择器、开关、滑块、时间选择器、日期选择器、日期时间选择器、上传、评分、颜色选择器、穿梭框、表单、表格、...

    产品经理必备Ant Design4.40-最新精编文件22年1月,AXURE原型设计,需要的素材和才考内容里面都有可以借鉴。

    autocomplete自动完成、checkbox多选框、cascader级联选择、datepicker日期选择框、form表单、inputnumber数字输入框、input输入框、mentions提及、rate评分、radio单选框、switch开关、slider滑动输入框、select...

    web元件库 ElementUI元件库+后台模板页面

    包含导航、颜色、字体、边框、图标、按钮、文字链接、单选框、多选框、输入框、计数器、选择器、级联选择器、开关、滑块、时间选择器、日期选择器、日期时间选择器、上传、评分、颜色选择器、穿梭框、表单、表格、...

    JavaScript网页特效范例宝典源码

    实例063 在下拉列表中进行多选移除 106 实例064 将数组中的数据添加到下拉菜单中 107 实例065 应用下拉菜单选择所要联机的网站 108 实例066 多级级联菜单 110 实例067 可以输入文字的下拉菜单 111 实例068 根据下拉...

    asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例

    前段时间需要作一个的Web前端应用,需要用多个框架,一个典型的应用场景是省市三级联动,基于此应用,特将三种主要的ajax框架略作整理,方便有需要的朋友查阅。 在示例之前,我们先设置一个演示数据源,新建一个项目...

    Vant 移动端元件库/微信小程序元件库

    表单组件:日历、复选框、级联选择、时间选择、输入框、数字键盘、密码输入框、选择器、单选按钮、评分、搜索、滑块、步进器、开关、开关单元格、文件上传; 反馈组件:上拉菜单、弹出框、下拉菜单、加载、消息提示...

    计算机应用基础简答题(附答案).doc

    答:在资源管理器窗口中单击工具栏中"搜索"按钮,在打开得"搜索助理"对话框中单击" 所有文件或文件夹",在"全部或部分文件名"框中输入文件名"Table、txt",在"在这里 寻找"框中,单击下拉列表选择C盘,然后单击"搜索...

    新版计算机应用基础简答题(附答案).doc

    答:在资源管理器窗口中单击工具栏中"搜索"按钮,在打开的"搜索助理"对话框中单击 "所有文件或文件夹",在"全部或部分文件名"框中输入文件名"Table.txt",在"在这里 寻找"框中,单击下拉列表选择C盘,然后单击"搜索...

    计算机的应用基础的简答题附答案.doc

    答:在资源管理器窗口中单击工具栏中"搜索"按钮,在打开的"搜索助理"对话框中单击 "所有文件或文件夹",在"全部或部分文件名"框中输入文件名"Table.txt",在"在这里 寻找"框中,单击下拉列表选择C盘,然后单击"搜索...

    计算机应用基础简答题附答案.doc

    答:在资源管理器窗口中单击工具栏中"搜索〞按钮,在翻开的"搜索助理〞对话框中单 击"所有文件或文件夹〞,在"全部或局部文件名〞框中输入文件名"Table.t*t〞,在"在 这里寻找〞框中,单击下拉列表选择C盘,然后...

    计算机应用基础简答题(附答案)(1).doc

    答:在资源管理器窗口中单击工具栏中"搜索〞按钮,在打开的"搜索助理〞对话框中单击 "所有文件或文件夹〞,在"全部或部分文件名〞框中输入文件名"Table.txt〞,在"在这里 寻找〞框中,单击下拉列表选择C盘,然后单击...

Global site tag (gtag.js) - Google Analytics