JS实现年月日下拉框的联动

最新推荐文章于 2019-12-25 16:09:06 发布
最新推荐文章于 2019-12-25 16:09:06 发布
阅读量2.3k 收藏 8
点赞数 4
分类专栏： JavaScript 文章标签： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/summerpoppy/article/details/53939960
版权

第一次写博客，刚学JS部分2天，新手写个年月日的下拉框。欢迎指正！

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

<body>
年<select onchange="setday()" id="year"></select>
月<select id="month" onchange="setday()"></select>
日<select id="day" onchange="setday()"></select>
</body>
<script type="text/javascript">
 //把年份加载进去
   var year = document.getElementById("year");
   for(var i = 1900 ; i <=2016 ; i ++){
       var options = document.createElement("option");
       options.innerHTML = i;
       year.appendChild(options);  
    }
</script>          

<script type="text/javascript">     
    //把月份加载进去
   var month = document.getElementById("month");
   for(var i = 1 ; i <=12 ; i ++){
       var options = document.createElement("option");
       options.innerHTML = i;
       month.appendChild(options);         
    }       
</script>

<script type="text/javascript">     
    //把天数加载进去
   var day = document.getElementById("day");
   for(var i = 1 ; i <=31 ; i ++){
       var options = document.createElement("option");
       options.innerHTML = i;
       day.appendChild(options);           
    }       
</script>



<script type="text/javascript">

    //根据年份，判断该月的具体天数，分为闰年
     function setday(){
       var specialyear ; //闰年的容器

        var year = document.getElementById("year");
        var yearIndex = year.selectedIndex;//获取选择年份的位置
        var yearSelect = year.options[yearIndex].text;//获取具体的年份
        if((yearSelect%4==0 && yearSelect%100!=0) || yearSelect%400==0)
             specialyear=yearSelect;//记下闰年   
            // alert(specialyear);

     //获取选择的月份
     var month = document.getElementById("month");
     var monthIndex = month.selectedIndex;
     var monthSelect = month.options[monthIndex].text;  
    // alert(monthSelect);         

    //加载天数  
       var day = document.getElementById("day");
       day.options.length=0;
       //alert(monthSelect);
       if(monthSelect=='1'||monthSelect=='3'||monthSelect=='5'||monthSelect=='7'||monthSelect=='8'||monthSelect=='10'||monthSelect=='12'){//这里数字要加引号
       for(var i = 1 ; i <=31 ; i ++){
       var options = document.createElement("option");
       options.innerHTML = i ;
       day.appendChild(options); 
           }        
           }
        // alert("day22");   
       if(monthSelect=='2'||monthSelect=='4'||monthSelect=='6'||monthSelect=='9'&&monthSelect=='11'){
         if(yearSelect==specialyear && monthSelect=='2') {
         for(var i = 1 ; i <=28 ; i ++){
        var options = document.createElement("option");
        options.innerHTML = i ;
        day.appendChild(options);    
         }
             } else{
        for(var i = 1 ; i <=30 ; i ++){
        var options = document.createElement("option");
        options.innerHTML = i ;
        day.appendChild(options); 
             }               
                 }             
    }
     }
</script>
</html>

得到的结果如下：
这里写图片描述

summerpoppy
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JavaScript实现年、月、日三下拉框联动
Richard_Jason的专栏
10-24 582
效果图： 示例代码：     年月日三下拉框联动                年       月       日            window.onload = function(){   strYYYY = document.form1.YYYY.outerHTML;   strMM = docume
js实现年月日联动功能
RoddyLD的博客
03-20 1302
js实现年月日联动功能 实现年月日联动最核心的就是要判断每个月份的天数，月份的天数可能是28或29或30或31天。然后通过appendChild()方法和getElementByID()方法实现年月日的联动功能。 具体实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
JS实现下拉选择日期，下拉选择年月日
weixin_43992507的博客
12-25 4227
标签容器 <select id="year_select"></select> <select id="month_select"></select> JS如下代码 // 年份列表 var yearNow = new Date().getFullYear(); var yearSel = 2019; for ...
js实现日历（下拉框选年，月份）
chris_xyf的博客
11-20 3860
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
js年月日三联动下拉框
nycqwert的专栏
10-10 656
点击查看效果 点击进入下载 年月日三联动下拉框 请选择 年 选择 月 选择 日 function YYYYMMDDstart() { MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //先给年下拉框赋内容 var y = new Dat
用js实现下拉框的二级联动
NullPointerException的博客
02-12 1255
&lt;!DOCTYPE h1 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;用js实现下拉框的二级
年月日三下拉框联动
03-16
标题“年月日三下拉框联动”涉及的是在网页前端开发中常见的一种交互设计，通常用于日期选择功能。这种设计允许用户通过三个独立的下拉框分别选择年、月和日，形成一个完整的日期输入。这样的方式既方便用户操作，也...
JQuery年月日三级下拉框联动
10-24
"JQuery年月日三级下拉框联动"就是一个解决此类需求的方案，它利用JavaScript库JQuery的便利性和高效性，实现了用户在选择年份后，月份和日期下拉框自动更新的交互效果。这种方式可以提高用户体验，减少用户手动操作...
JS年月日三级联动下拉框日期选择特效代码
03-20
"JS年月日三级联动下拉框日期选择特效代码" 提供了一种实现方式，它通过JavaScript（JS）来创建一个包含年、月、日的三级下拉菜单，用户可以逐级选择，形成一个完整的日期。这种设计既简洁又直观，特别适用于那些...
js下拉框选择年月日代码
09-26
js下拉框选择年月日代码
JS年月日三级联动下拉框日期选择代码.zip
07-05
JS年月日三级联动下拉框日期选择代码，默认当前日期，代码附带详细中文注释，供大家参考。
年月日联动选择，Js下拉框的选择
12-01
JS实现年月日的联动选择，下拉框的选择；JS实现年月日的联动选择，下拉框的选择
日期下拉列表，年月日分开的！！
01-04
日期下拉列表，年月日分开的！！简单来说就是两个数字之间的下拉列表
下拉框选择年月日代码
04-27
<HTML> <HEAD> <title>年月日三联动下拉框</title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <meta name='author' content='http://singlepine.cnblogs.com/'> </HEAD> <body> <form name="form1"> 请选择 年 选择 月 选择 日 </form> [removed]<!-- function YYYYMMDDstart() { MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //先给年下拉框赋内容 var y = new Date().getFullYear(); for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年 document.form1.YYYY.options.add(new Option(" "+ i +" 年", i)); //赋月份的下拉框 for (var i = 1; i < 13; i++) document.form1.MM.options.add(new Option(" " + i + " 月", i)); 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(); } if(document.attachEvent) window.attachEvent("onload", YYYYMMDDstart); else window.addEventListener('load', YYYYMMDDstart, false); function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年) { var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; if (MMvalue == ""){ var e = document.form1.DD; optionsClear(e); 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 (YYYYvalue == ""){ var e = document.form1.DD; optionsClear(e); return;} var n = MonHead[str - 1]; if (str ==2 && IsPinYear(YYYYvalue)) n++; writeDay(n) } function writeDay(n) //据条件写日期的下拉框 { var e = document.form1.DD; optionsClear(e); for (var i=1; i<(n+1); i++) e.options.add(new Option(" "+ i + " 日", i)); } function IsPinYear(year)//判断是否闰平年 { return(0 == year%4 && (year0 !=0 || year@0 == 0)); } function optionsClear(e) { e.options.length = 1; } //--> [removed] </body> </HTML>
年月日联动下拉_日期_下拉框_
09-29
在网页设计和开发中，"年月日联动下拉_日期_下拉框_"是一个常见的交互功能，主要用于用户输入日期时提供便捷的选择方式。这个功能通常由三个独立的下拉框组成，分别用于选择年份、月份和日期，且这三个下拉框之间...
html年月日三下拉框联动
04-10
### HTML年月日三下拉框联动：深入解析与实现 在HTML网页设计中，创建交互式的用户界面是提升用户体验的关键。其中，日期选择器是一个常见的功能，尤其是当需要用户输入具体的日期时。本文将详细解析一个简单的HTML...
纯JS实现出生日期[年月日]下拉菜单
ljheee的博客
04-16 2万+
纯JS实现出生日期[年月日]下拉菜单 在制作网页时，可能需要给用户提供注册帐号页面，用户注册 设计很多信息，其中就有 关于出生日期的，出于用户体验，不想让用户手动输入，而HTML5的date，目前很多浏览器支持的并不是很好，所以就可以用JS实现年、月、日3个下拉框的日期选择。具体代码如下： 1、新建一个js文件，如birthday.js; function DateSelector(se
JS实现html下拉菜单列表进行年月日选择
热门推荐
阿梦的博客
04-04 3万+
使用JS实现年月日下拉列表的选择 如下图： 具体操作： 两个js文件，设置效果 在.html中导入两个外部js文件 jquery.time.js $(function () { $.ms_DatePicker({ YearSelector: ".sel_year", MonthSelector: ".sel_month", ...
javascript年月日三级联动下拉框
Violet_Ice紫冰的CSDN博客
08-14 2145
看了好几篇 js 年月日三级联动下拉框，没看到一个好的，不是太繁琐，就是太猥琐。还有就是闲得慌。有这样的：function (){ return Array( [1...28], [1...30], [1...31] ) }简直了，这是要有多闲。 还有的写的很复杂，这很简单的东西，搞得那么复杂给谁看。我看半天愣是没看懂。
html+js实现下拉框年月日
最新发布
03-02
要在HTML和JavaScript中实现下拉框选择日期，可以采用以下方法： HTML代码： ``` <select id="year"></select> <select id="month"></select> <select id="day"></select> ``` JavaScript代码： ``` // 获取年份的下拉框 var yearSelect = document.getElementById("year"); // 获取月份的下拉框 var monthSelect = document.getElementById("month"); // 获取日期的下拉框 var daySelect = document.getElementById("day"); // 添加年份选项 for (var i = 1900; i <= 2100; i++) { var option = document.createElement("option"); option.value = i; option.text = i; yearSelect.appendChild(option); } // 添加月份选项 for (var i = 1; i <= 12; i++) { var option = document.createElement("option"); option.value = i; option.text = i; monthSelect.appendChild(option); } // 添加日期选项 function updateDays() { var year = yearSelect.value; var month = monthSelect.value; // 清空之前的选项 daySelect.innerHTML = ""; // 计算当月有多少天 var daysInMonth = new Date(year, month, 0).getDate(); // 添加日期选项 for (var i = 1; i <= daysInMonth; i++) { var option = document.createElement("option"); option.value = i; option.text = i; daySelect.appendChild(option); } } // 添加年份和月份的事件监听器 yearSelect.addEventListener("change", updateDays); monthSelect.addEventListener("change", updateDays); // 初始化日期选项 updateDays(); ``` 这段代码会生成三个下拉框，分别对应年、月、日。年份的选项从1900年到2100年，月份的选项从1到12，日期的选项则根据年份和月份动态生成。当用户选择年份或月份时，JavaScript代码会重新计算当月有多少天，并更新日期选项。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值