利用javascript实现从某年到当前年的下拉列表框
来源:互联网 发布:免费录音软件 编辑:程序博客网 时间:2024/06/06 11:02
在我们进行注册页面的填写,一般设计到年龄的选择或者入学年份等此类循环渐加的,可以使用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>
- 利用javascript实现从某年到当前年的下拉列表框
- 下拉框默认选中当前年、月、日的实现!
- jsp页面年份下拉框生成当前年的前十年和后十年
- js 实现下拉列表的重复利用
- javascript实现下拉列表框选择时另一下拉列表框的值相应变化
- javascript实现下拉列表和复选框的选中
- 设置下拉列表框的javascript方式进行实现
- JavaScript实现下拉列表的级联
- javascript 实现 下拉列表的链接效果
- javaScript实现下拉列表的选定
- javascript实现下拉列表框模糊查询
- 获得当前年、月的最后一天
- javascript实现用户名验证及级联下拉列表的产生
- 下拉列表框实现
- 下拉列表框实现
- NGUI中利用UIGrid实现下拉列表
- 用Javascript实现类似ComboBox的可编辑下拉列表框.
- 实现带复选框的下拉列表
- iOS基础概念
- Eclipse全键盘编码攻略之一——入门
- 深入理解Angular依赖注入
- 响应式布局基础二:设置viewport
- Windows 下 MySQL 5.7.9 安装教程
- 利用javascript实现从某年到当前年的下拉列表框
- 消息队列------Redis
- log4j 在控制台打印 mybatis 的 sql 语句的配置
- 深入探讨 Java 类加载器 https://www.ibm.com/developerworks/cn/java/j-lo-classloader/
- Spark源码分析之七:Task运行(一)
- CentOS6.5虚拟机下搭建Hadoop伪分布式环境
- Bootstrap v2.3.1 进度条设置设置进度
- https://projecteuler.net/problem=6
- STL_stack