自定义属性的应用：日期下拉框的生成

最新推荐文章于 2021-06-04 12:51:06 发布

原创最新推荐文章于 2021-06-04 12:51:06 发布 · 784 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #浏览器兼容性

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种根据当前日期或指定值自动生成年份和月份下拉选择框的方法。利用JavaScript实现了动态生成带有默认选中项的年份与月份选项，适用于网页表单等场景。

有年月的下拉框，要求根据当期日期自动生成下拉框，也可以根据指定值生成。（年的下拉框需前5年，后10年）

html文件：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
根据当前日期生成：<br><select class="year" value=""></select>
<select class="month" value=""></select><br>
自己指定：<br><select class="year" value="2015"></select>
<select class="month" value="7"></select>
</body>
</html>

javascript代码：

$(function(){
	year();
	month();
	
});
/**
 * 根据指定value值或当前日期生成年select框
 * <select class="year" value=""></select>
 * value不给或空字符串时，将根据当前日期生成
 */
function year(){
	var sele = document.getElementsByTagName("select");
	var year;
    var option;
    var value;
    for (var i=0; i<sele.length; i++) {
      if (sele[i].getAttribute("class") == "year") {//对于固有属性，也可以.属性名，由于class属性同时是关键字，需要.className 方式使用
    	 //此处需getAttribute(属性名)方法，不能用.属性名的方式，firefox和chrome不兼容.value方式，IE可以
    	 value=sele[i].getAttribute("value");
    	  if(value && /^\d+$/.test(value)){
    	  	year=parseInt(value);
    	 }else{
    		year=new Date().getFullYear();
    	 }
    	 for(var j=year-5;j<year+10;j++){
    		 //option创建方式还有var option=new Option('text','value');但IE不支持，firefox和chrome均可
    		option=document.createElement("option");
    	    option.value=j;
    	    option.innerHTML=j;
    	    if(j==year){
    	    	option.selected="selected";
    	    }
    	    //此处需要appendChild()方法
    	    //对于innerHTML='<option></option>'方式IE不支持，firefox和chrome均可
    	    sele[i].appendChild(option);
    	 }
      }
    }
}
/**
 * 根据指定value值或当前日期生成年select框
 * <select class="month" value=""></select>
 * value不给或空字符串时，将根据当前日期生成
 */
function month(){
	var sele = document.getElementsByTagName("select");
	var month;
    var option;
    var value;
    for (var i=0; i<sele.length; i++) {
      if (sele[i].getAttribute("class") == "month") {
    	  value=sele[i].getAttribute("value");
    	  if(value && /^\d+$/.test(value)){
    		 month=parseInt(value);
    	 }else{
    		 month=new Date().getMonth()+1;
    	 }
    	 for(var j=1;j<=12;j++){
    		option=document.createElement("option");
    		if(j<10){
    			option.value="0"+j;
        	    option.innerHTML="0"+j;
    		}else{
    			option.value=j;
        	    option.innerHTML=j;
    		}
    	    if(j==month){
    	    	option.selected="selected";
    	    }
    	    sele[i].appendChild(option);
    	 }
      }
    }
}

效果图如下：