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

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

鹤立鸭群

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

阅读量742

点赞数

分类专栏： JavaScript 文章标签： javascript 浏览器兼容性

本文链接：https://blog.csdn.net/csndmi/article/details/11580955

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

有年月的下拉框，要求根据当期日期自动生成下拉框，也可以根据指定值生成。（年的下拉框需前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);
    	 }
      }
    }
}

效果图如下：

鹤立鸭群

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义属性的应用：日期下拉框的生成

有年月的下拉框，要求根据当期日期自动生成下拉框，也可以根据指定值生成。（年的下拉框需前5年，后10年）html文件：Test根据当前日期生成：自己指定：javascript代码：$(function(){ year(); month(); });/** * 根据指定value值或当前日期生成年select框 * * valu
复制链接

扫一扫

专栏目录