年份select选择框的无限扩展-网页编程网

当前位置：主页 >> JavaScript >> 正文

年份select选择框的无限扩展

阅读：4804 输入：2017-06-02 07:46:00

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title无限扩展的年份select</title>
</head>
<body>
<script>
//-------------------------------------
//  无限扩展的年份select
//-------------------------------------

var Lastyear;
function selYear(obj,Cyear){
var len=16; //select长度
var selObj=document.getElementById(obj)
var selIndex=parseInt(len/2)-1;
var newOpt;
var LY=Cyear-Lastyear;
for (i=0;i<len;i++){
   if (selObj.options.length!=len){
     newOpt=document.createElement("OPTION");
     newOpt.text=Cyear-selIndex+i;
     newOpt.value=Cyear-selIndex+i;
     selObj.options.add(newOpt,i)
      if (selIndex==i) {Lastyear=newOpt.value}      
     }else{
     selObj.options[i].text=parseInt(selObj.options[i].text)+LY;
     selObj.options[i].value=parseInt(selObj.options[i].value)+LY;
     if (selIndex==i) {Lastyear=selObj.options[i].value;}           
    }
 }
  selObj.selectedIndex=selIndex;
}
</script>
<select id="yearSelect" name="yearSelect" onchange="selYear('yearSelect',this.value)"></select>
<script>selYear('yearSelect',2017) //初试化select</script>
</body>
</html>

相关阅读: 点击文本框弹出中英文双语日期选择器; CSS+JS打造的一款日期选择; js实现日历选择功能