JavaScript十一：表单三：下拉列表框初始化，初级介绍

最新推荐文章于 2024-08-22 15:23:20 发布

小懒羊爱吃草

最新推荐文章于 2024-08-22 15:23:20 发布

阅读量1.3k

点赞数 1

分类专栏：（3）JavaScript（网页搭建与JavaWeb基础）

本文链接： https://blog.csdn.net/csucsgoat/article/details/111872837

版权

（3）JavaScript（网页搭建与JavaWeb基础）专栏收录该内容

17 篇文章 4 订阅

订阅专栏

列表：

● 如：var yyyy = document.getElementById("yyyy"); 这个方法可以获取id=“yyyy”的控件；获得之后，方便后续操作；

● 如：yyyy.options.add(new Option(i,i)); 给yyyy这个控件，添加下拉的选项，其中第一个参数是页面显示值，第二个参数是value值；

● 对于这个列表的初始化，采用了onload()函数的处理方式；

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  <!--add()方法输出中文出现了乱码，这儿指定下编码方式-->
	<title>js</title>
	<script type="text/javascript" src="index.js"></script>
</head>
<body onload="ymd()">
	<form>
		<select name="yyyy" id="yyyy"></select><!--通常name是给js用的，id是给css用的-->
		<select name="mm" id="mm"></select>
		<select name="dd" id="dd"></select>
	</form>
</body>
</html>

function ymd(){ 
	var yyyy = document.getElementById("yyyy");   // 获取id=“yyyy”的控件；
	var mm = document.getElementById("mm");
	var dd = document.getElementById("dd");
	var date = new Date();
	var currentYear = parseInt(date.getFullYear());  // 获取当前年份；
	initSelect(yyyy,1999,currentYear);
	initSelect(mm,1,12);
	initSelect(dd,1,31);	
}

/*把常用功能凝练成一个函数，需要传递三个参数：表单元素，开始的值，结束的值*/
function initSelect(obj,start,end){
	for(var i=start;i<=end;i++){
		// options.add()：给yyyy这个表单元素里面添加条目；第一个参数是显示的值，第二个参数是value的值；
		obj.options.add(new Option(i,i));   
	}
}

效果：