基于JavaScript实现年月日三级联动
本文实例为大家分享了JavaScript实现年月日三级联动的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>年月日三级联动</title>
</head>
<body onload="initYear(),initMonth()">
<select id="year"></select>年
<select id="month" onchange="initDate()"></select>月
<select id="date"></select>日
<script>
/**
* 初始化年
*/
function initYear() {
//获得当前年份
let curYear = new Date().getFullYear();
//获得年列表对象
let yearObj = document.getElementById("year");
yearObj.options.add(new Option("---请选择年---", ""));
for (let year = curYear; year > curYear - 100; year--) {
let option = new Option(year, year);
yearObj.options.add(option);
}
}
/**
* 初始化月份
*/
function initMonth() {
//获得年列表对象
let monthObj = document.getElementById("month");
monthObj.options.add(new Option("---请选择月份---", ""));
for (let month = 1; month <= 12; month++) {
let option = new Option(month, month);
monthObj.options.add(option);
}
}
/**
* 初始化日
*/
function initDate() {
let dateObj = document.getElementById("date");
//获得当月选中月份
let month = document.getElementById("month").value;
//当月份选择完毕，再弹出对应日期
dateObj.options.add(new Option("---请选择日期---", ""));
//将month转化成数字
month = parseInt(month);
//定义每月的天数
let days = 31;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
break;
case 4:
case 6:
case 9:
case 11:
days = 30;
break;
case 2:
//需要判断是否为闰年，获得当前选中的年
let year = document.getElementById("year").value;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
days = 29;
} else {
days = 28;
}
break;
}
//将得到的天数，循环输出
for (let i = 1; i <= days; i++) {
let option = new Option(i, i);
dateObj.options.add(option);
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现年月日表单三级联动
用Html实现人人网注册界面 ,Js实现生日栏表单三级联动 1. 效果 2.Html代码部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>人人网日期表单联动</title> <style> select { font:20px/40px '宋体'; } option {width: 100
-
基于JavaScript实现年月日三级联动
本文实例为大家分享了JavaScript实现年月日三级联动的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>年月日三级联动</title> </head> <body onload="initYear(),initMonth()&qu
-
利用select实现年月日三级联动的日期选择效果【推荐】
前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介绍 规划 默认情况下,年.月.日分别由3个select控件组成,id分别为sel1,sel2,sel3.它们且所包含的option[0]的值,分别为'年'.'月'.'日' 年份范围为1900-2100,月份范围为1-12,天的范围为1-31 年份范围.月份范围是不变的.而天的范围根据实际日期的计算来改变其范围值 id为result的span元素储存最终选择的日期
-
基于jquery实现省市区三级联动效果
本文实现更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们. JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项目中. 说明:数据来源于国家统计局官网. 先上图: 绑定省市区 使用方法: 1. 引用JQUERY <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"&g
-
javascript实现日期三级联动下拉框选择菜单
由于工作中涉及到生日编辑资料编辑,年月日用上面网址案例:bug提示: 编辑生日栏的[年]或者[月],之前保存的具体的[日]就不显示啦,产品说不管编辑哪个数据,其他数据不变: 然后自己改了一下代码: <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,minimu
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
JavaScript实现省市区三级联动
本文实例为大家分享了JavaScript实现省市区三级联动的具体代码,供大家参考,具体内容如下 首先是js $(document).ready(function(){ getErpMarketByParentCode(0,'province',province); getErpMarketByParentCode(province,'city',city); getErpMarketByParentCode(city,'area',area); getErpMarketByParentCode(
-
JavaScript+node实现三级联动菜单
本文实例为大家分享了JavaScript+node实现三级联动菜单的具体代码,供大家参考,具体内容如下 项目分析 1.效果 2.前端 =>面向对象 =>首先分析下拉结构,构造相应的结构和样式 =>绑定事件,点击,鼠标滑过等 =>导入写好的 js 文件 构造菜单项. =>使用ajax请求服务端 获取数据 =>用每次获取的数据动态生成页面结构 3.服务端 =>接口文档(定义接口,服务地址,端口} =>存储数据 =>创建服务器 =>接收前端的ajax请
-
基于MVC方式实现三级联动(JavaScript)
本文实例为大家分享了基于MVC三级联动的具体代码,供大家参考,具体内容如下 Html代码: <div class="box"> <select class="make"> <option>请选择品牌</option> </select> <select class="model"> <option>请选择车型</option> </select&
-
Android日期选择器实现年月日三级联动
最近项目里面用到了一个日期选择器,实现现在主流的WheelView滑动选择,整理了下,做了个Demo.废话不多说,直接上代码. 主布局:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&quo
-
基于Bootstrap实现城市三级联动
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 HTML代码部分 <div class="form-group"> <div class="col-sm-2 text-center"> 省 </div> <div class="col-sm-2"> <select class="form-control" name="Prov