下拉菜单三级互联小例

简介:

    不能不说这Web时代一切都风云变幻。富客户端再一次奇袭人们的眼球,看到很多网站使用了Flex技术,更多的WebGUI和Web前端交互的人性化,智能化带给我们的网上冲浪另一番滋味,哦,冲浪这个词都可以进互联网词汇的祠堂了,太久了。

      翻箱倒柜突然发现磁盘的某个磁道和盘面的夹缝中有一个曾曾经经写的下拉菜单三级互联的小例子,好像有回到了从前。在网上看到新奇的功能有不知道怎么实现的,就只能臆断和DIY,最后能够成个像模像样能开心半天。

    贴出来尿布娱乐下。

 
  1. <html> 
  2.     <head> 
  3.         <title>三级互联,javaScripty实现</title> 
  4.     </head> 
  5.     <script language="javaScript"> 
  6.               
  7.         var year;  
  8.         var month;  
  9.         var day;  
  10.       
  11.     //初始化显示信息  
  12.         function intial(){  
  13.             year=document.getElementById("year");  
  14.             month=document.getElementById("month");  
  15.             day=document.getElementById("day");  
  16.             intitalField(year, 2000, 2015);  
  17.             intitalField(month, 1,  12);  
  18.             intitalField(day, 1, 31);  
  19.         }  
  20.     //下拉菜单信息添加  
  21.         function intitalField(object, startNum, endNum){  
  22.             for(var i=startNum; i<=endNum; i++){  
  23.                 object.options.add(new Option(i, i));  
  24.             }  
  25.         }  
  26.     //闰年判断  
  27.         function isLeap(){  
  28.             year=document.getElementById("year");  
  29.             var yearyearValue=year.options(year.selectedIndex).value;  
  30.             return (yearValue%4==0&&yearValue%100!=0)||yearValue%400==0;  
  31.         }  
  32.     //下拉菜单显示处理  
  33.         function jugeDays(totalDays,len, day){  
  34.             var i;  
  35.             var j;  
  36.             if(len<totalDays){  
  37.                 for(i=len+1; i<=totalDays; i++){  
  38.                     day.add(new Option(i, i));  
  39.                 }  
  40.             }else if(len>totalDays){  
  41.                 for(j=len; j>totalDays; j--){  
  42.                     day.remove(j-1);  
  43.                 }  
  44.             }  
  45.         }  
  46.     //通过月份来获取该月的天数  
  47.         function days(){  
  48.             month=document.getElementById("month");  
  49.             day=document.getElementById("day");  
  50.             var monthmonthValue=month.options(month.selectedIndex).value;  
  51.             var len=day.length;  
  52.             var tag=isLeap();  
  53.             if(monthValue==4||monthValue==6||monthValue==9||monthValue==11){  
  54.                 jugeDays(30, len, day);  
  55.             }else if(monthValue==2){  
  56.                 if(tag){  
  57.                     jugeDays(29, len, day);   
  58.                       
  59.                 }else{  
  60.                     jugeDays(28, len, day);  
  61.                       
  62.                 }  
  63.             }else{  
  64.                 jugeDays(31, len, day);  
  65.             }  
  66.         }  
  67.  
  68.     </script> 
  69.       
  70.     <body onload="intial()" /> 
  71.         <select name="year" id="year" > 
  72.         </select> 
  73.         <select name="month" id="month" onchange="days()"> 
  74.         </select> 
  75.         <select name="day" id="day" > 
  76.         </select> 
  77.     </body> 
  78. </html> 

       现在看到都于心不忍啊。看到这些那才叫时光荏苒啊,天天学习,好好向上,不然对不起那些年的憨厚十足的劲。。

      存在了,拿来主义的用;不存在的,想想如何个弄出来;不造重复的轮子,当然学习的时候还是试试造几个山寨版轮在,要不然都没有上面这些代码了。



本文转自 secondriver 51CTO博客,原文链接:http://blog.51cto.com/aiilive/1062576,如需转载请自行联系原作者

相关文章
【每日教程】用中继器做一个三级菜单(含标签)
【每日教程】用中继器做一个三级菜单(含标签)
|
前端开发 JavaScript 开发者
技术汇总:第四章:使用Easyui做三级下拉列表
技术汇总:第四章:使用Easyui做三级下拉列表
技术汇总:第四章:使用Easyui做三级下拉列表
【Axure教程】中继器联动——二级下拉列表案例
【Axure教程】中继器联动——二级下拉列表案例
【Axure教程】中继器联动——二级下拉列表案例
|
前端开发
前端工作总结190-三级级联问题
前端工作总结190-三级级联问题
55 0
前端工作总结190-三级级联问题
|
前端开发
前端工作总结185-element三级文档多选
前端工作总结185-element三级文档多选
78 0
前端工作总结185-element三级文档多选
|
前端开发
前端工作总结128-一级控制二级菜单的变化
前端工作总结128-一级控制二级菜单的变化
103 0
前端工作总结128-一级控制二级菜单的变化
|
定位技术 API
好客租房130-获取顶部导航信息
好客租房130-获取顶部导航信息
141 0
好客租房130-获取顶部导航信息
好客租房159-组件内样式覆盖问题的说明
好客租房159-组件内样式覆盖问题的说明
86 0