位置：首页>> 网络编程>> JavaScript>> js实现一个日期联动下拉菜单（2）

js实现一个日期联动下拉菜单（2）

作者：Qihontin　　发布时间：2007-08-04 20:49:00　

标签：联动菜单,日期,js

接下来开始对联动菜单进行初始化，首先是年份，我们可以给类增加一个MinYear属性表示最小的年份，再增加一个MaxYear表示最大的年份，实现一个InitYearSelect方法初始化年份，实现一个InitMonthSelect方法初始化月份。由于这几个属性和方法的思路都是很简单，就不一一讲解，看看代码是怎么写的应该就能够明白，如果对类方面有不清楚有地方可以参考我发表在无忧脚本另一篇文章《由浅到深了解JavaScript类》。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>如何实现一个日期下拉菜单</title>
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
    this.selYear = selYear;
    this.selMonth = selMonth;
    this.selDay = selDay;
    this.InitYearSelect();
    this.InitMonthSelect();
}

// 增加一个最大年份的属性
DateSelector.prototype.MinYear = 1900;

// 增加一个最大年份的属性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();

// 初始化年份
DateSelector.prototype.InitYearSelect = function()
{
    // 循环添加OPION元素到年份select对象中
    for(var i = this.MaxYear; i >= this.MinYear; i--)
    {
        // 新建一个OPTION对象
        var op = window.document.createElement("OPTION");

        // 设置OPTION对象的值
        op.value = i;

        // 设置OPTION对象的内容
        op.innerHTML = i;

        // 添加到年份select对象
        this.selYear.appendChild(op);
    }
}

// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
    // 循环添加OPION元素到月份select对象中
    for(var i = 1; i < 13; i++)
    {
        // 新建一个OPTION对象
        var op = window.document.createElement("OPTION");

        // 设置OPTION对象的值
        op.value = i;

        // 设置OPTION对象的内容
        op.innerHTML = i;

        // 添加到月份select对象
        this.selMonth.appendChild(op);
    }
}
</script>
</head>
<body>
<select id="selYear"></select>
<select id="selMonth"></select>
<select id="selDay"></select>
<script type="text/javascript">
var selYear = window.document.getElementById("selYear");
var selMonth = window.document.getElementById("selMonth");
var selDay = window.document.getElementById("selDay");

// 新建一个DateSelector类的实例，将三个select对象传进去
new DateSelector(selYear, selMonth ,selDay);
</script>
</body>
</html>

第一页上一页 1

3 下一页

投稿

js实现一个日期联动下拉菜单（2）

猜你喜欢