使用HTML5和JS实现日期下拉框功能

使用HTML5和JS实现日期下拉框功能
如图所示：

代码如下：

            <center>
                <span style="font-size:26pt;color:red;">部门年度考核表(</span>
                <span style="font-size:26pt;color:red;">
                    <select id="yearDegree" name="yearDegree" style="font-size:26pt;color:red;appearance: none;" class="year" value=""></select>
                </span>
                <span style="font-size:26pt;color:red;">年度)</span>
            </center>

JS代码：

```html

```javascript
<script language="javascript" type="text/javascript" >
    $(function(){
        year();
    });
    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-10;j<year+20;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";
                    }
                    sele[i].appendChild(option);
                }
            }
        }
    }
</script>

记住，还需要一个jquery工具包