利用javascript实现从某年到当前年的下拉列表框_写年份的下拉框的思路js-优快云博客

本文介绍如何利用JavaScript实现从指定年份到当前年的下拉列表框，适用于网页表单中的入学年份选择。通过示例代码演示了如何动态添加option元素，并提供了两个函数`addOptionsInAge`和`addOptionsInEnrollYear`，分别用于生成年龄和入学年份的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在我们进行注册页面的填写，一般设计到年龄的选择或者入学年份等此类循环渐加的，可以使用JavaScript进行动态的添加。

以下是示例代码

<html>
<head>
<title>使用JavaScript为select(下拉列表)进行动态的option添加</title>

<script>
/**
addOptionsInAge函数是将0到199内的所有数字添加到名为age
的这个下拉列表框的选项中，其中每个选项的value和显示的text
都为0-199中的数字。
先获取到age所代表的select，
然后循环，将所有的option依次添加到select中。

addOptionsInEnrollYear函数类似，但是该函数可以动态获取当前的年份，
即从date类型的getFullYear方法获取到年份。
*/
function addOptionsInAge(){
var select = document.getElementById("age");

for(var i = 0; i < 200; i ++){
var Option = document.createElement("option");
Option.setAttribute("value",""+i);
Option.text = ""+i;
select.appendChild(Option);
}
}

function addOptionsInEnrollYear(){
var time = new Date();
var year = time.getFullYear();
var select = document.getElementsByTagName("select")[1];

for(var j = 1990; j <= year; j ++){
var Option = document.createElement("option");
Option.setAttribute("value",""+j);
Option.text = ""+j;
select.appendChild(Option);
}
}

</script>
</head>

<body>
<form name="student" action="">
姓名:<input name="username" type="text" />
<br>
学号:<input name="studentno" type="text" />
<br>
年龄:<select name="age" id="age">
<script>addOptionsInAge();</script>
</select>
<br>
入学年份:<select name="enrollYear" id="enrollYear">
<script> addOptionsInEnrollYear();</script>
</select>
<br>
<input type="submit" value="提交" />

</form>
</body>

</html>