`

简单日期下拉框

阅读更多

项目中用到一个级联、动态下拉选择日期框。我以前也收集过关于地区级联的,那时候是用别人代码。今天这个虽然简单但感觉自己还是进步满大,最起码是自己亲手写出来的。o(∩_∩)o...哈哈
   首先是php代码生成一个年月日的下拉组件。

 1 <? php
 2      echo   " <select id=\ "" .$statement. " _year\ "  onchange=\ " resetDate( ' ".$statement." ' )\ "  disabled> " ;
 3      for ( $i = 2003 ; $i <= 2015 ; $i ++ )
 4     {
 5          if ( $i == 2003 )
 6         {
 7              echo   " <option value=\ "" .$i. " \ "" . "  selected> " . $i . " </option> " ;
 8         }
 9          else
10         {
11              echo   " <option value=\ "" .$i. " \ " > " . $i . " </option> " ;    
12         }
13     }
14      echo   " </select>年 " ;
15      echo   " <select id=\ "" .$statement. " _month\ "  onchange=\ " resetDate( ' ".$statement." ' )\ "  disabled> " ;
16      for ( $i = 1 ; $i <= 12 ; $i ++ )
17     {
18          if ( $i == 1 )
19         {
20              echo   " <option value=\ "" .$i. " \ "" . "  selected> " . $i . " </option> " ;
21         }
22          else
23         {
24              echo   " <option value=\ "" .$i. " \ " > " . $i . " </option> " ;    
25         }
26     }
27      echo   " </select>月 " ;
28      echo   " <select id=\ "" .$statement. " _day\ "  disabled> " ;
29      for ( $i = 1 ; $i <= 28 ; $i ++ )
30     {
31          if ( $i == 1 )
32         {
33              echo   " <option value=\ "" .$i. " \ "" . "  selected> " . $i . " </option> " ;
34         }
35          else
36         {
37              echo   " <option value=\ "" .$i. " \ " > " . $i . " </option> " ;    
38         }
39     }
40      echo   " </select>日 " ;
41 ?>
42

也许你已经发现了,组件的ID我用了一个动态的。但是更让你气氛的是我居然把2月的日期都只写了28天。(其实应该写31天,必定默认选择的是1月吧)(难道是防止闰年2月用户却选择29,甚至选择30、31?)哈哈,你误会了。请看下面的javascript代码。
 1/**//*
 2 * @breif: 根据月份 以及年份调整日期的下拉选择天数
 3 * 
 4 */

 5function changDay(obj)
 6{
 7    var year_id = obj+"_year";
 8    var month_id = obj+"_month";
 9    var day_id = obj+"_day";
10    var year = Arr_year[parseInt(document.getElementById(year_id).selectedIndex)];
11    var month = Arr_month[parseInt(document.getElementById(month_id).selectedIndex)];
12    //获取下拉框
13    var select = document.getElementById(day_id);
14    //获取下拉框列表
15    var options  = document.getElementById(day_id).options;
16    var len = options.length;
17    //大月情况,即有31号
18    if(month==1||month==3||month==5||month==7||month==8||month==10||month==12)
19    {
20        while(len<31)
21        {
22            //增加一个元素
23            options[len]=new Option(len+1,len+1);
24            len++;
25        }

26    }

27    else if(month==4||month==6||month==9||month==11)//小月,但不为2月
28    {
29        while(len<30)
30        {
31            //增加一个元素
32            options[len]=new Option(len+1,len+1);            
33            len++;
34        }

35        while(len>30)
36        {
37            //删除一个元素
38            select.remove(len-1);
39            len--;
40        }

41    }

42    else if(month==2&&(year%4==0&&year%100!=0||year%400==0))
43    {
44        while(len>28)
45        {
46            //删除一个元素
47            select.remove(len-1);
48            len--;
49        }

50    }
else
51    {
52        while(len<29)
53        {
54            //增加一个元素
55            options[len]=new Option(len+1,len+1);            
56            len++;
57        }

58        while(len>29)
59        {
60            //删除一个元素
61            select.remove(len-1);
62            len--;
63        }

64    }

65}

66/**//*
67 * @breif: 选择年份 或者月份后 重置日期为1
68 */

69function resetDate(obj)
70{
71    var state_Flag = obj+"_day";
72    document.getElementById(state_Flag).selectedIndex=0;
73    changDay(obj);
74}

这里利用了简单的dom编程,根据年月来通过事件动态增删下拉列表选择组件。

最近到处问级联怎么写的人不少。实际上我这里只是我写的一个简单的算法,你大可不必想这么细,想想方法,知道怎么来着就ok了。

比如我就在写这篇博客的时候想到用ajax,动态取数据,那时候用ajax不是试过动态替换div嘛,当然也可以替换option原色的。但是总不适合刷新页面的,所以用脚本或者ajax比较正常。

当然我们下拉框也许不多。比我的这种。那么我们还可以同时放几个select组件在那里,然后根据事件(即用户对其他选项的操作)控制其是否显示或者不显示哪个select。

大家可以谈论啊。不一定要什么太专业,我们可以有很多想法,有不同的想法,也希望大家分享,赐教。

ps:记得从前有人参加计算机考试,题目是让写程输出:(大概意思了吧)

*
**
***
****
*****
(也许没有这么规则,大概是要求用某种算法的形式。)
1. 有人用了比较传统的书上方法

2. 我当时用了一个字符串“*****”循环打印其子串;

3. 不过有一哥们,直接就是:
system.out.println("*");
system.out.println("*"*);
……
事后,谁能说他是错的(相反我觉得那小子不错!),老师一定满无奈的(当时不是学了)。(o(∩_∩)o...哈哈)必定那不是他考题的目的吧。
分享到:
评论

相关推荐

    下拉框选择年月日代码

    ### 下拉框选择年月日代码解析 ...本代码实现了一个简单的年、月、日三联动下拉框功能,可以有效帮助用户快速准确地选择日期。通过JavaScript的动态处理,使得用户界面更加友好,用户体验也得到了提升。

    html年月日三下拉框联动

    4. **函数编写**:示例代码包含了多个函数,如`YYYYMMDDstart()`初始化下拉框,`YYYYDD()`和`MMDD()`处理年份和月份变化时的逻辑,以及`writeDay()`用于重写日期下拉框的选项。 #### 代码解析 首先,我们看到HTML...

    C#005下拉框的应用

    - 在搜索界面,可以利用下拉框作为筛选条件,如按类别、日期等筛选。 - 在配置设置界面,下拉框可以用于显示不同的配置选项,使用户轻松切换。 6. 设计与布局: - 可以调整下拉框的大小、位置、字体样式等外观...

    ASP 简单实现日期下拉菜单

    以下是一个简单的ASP实现日期下拉菜单的例子: 首先,HTML部分包含三个`&lt;select&gt;`元素,分别用于年、月和日的选择。每个`&lt;select&gt;`都有一个唯一的ID,分别是`tYEAR`、`tMON`和`tDAY`。当用户在年或月的下拉菜单中...

    Android使用 Spinner控件实现下拉框功能

    1. 实现简单:使用 Spinner 控件可以很方便地实现下拉框功能,无需编写复杂的代码。 2. 自定义样式:Spinner 控件可以自定义样式,例如可以设置下拉列表的风格和颜色。 3. 可扩展性:Spinner 控件可以扩展到多个选项...

    jQuery弹出下拉框日期选择器.zip

    《jQuery弹出下拉框日期选择器:打造高效前端日期输入体验》 在网页开发中,用户界面的交互性与易用性至关重要。一个优秀的日期选择器能够大大提高用户体验,简化用户在填写表单时的选择过程。本文将详细介绍如何...

    下拉框样式美化

    在旅行预订网站,下拉框的美化能让用户在选择目的地、日期等选项时感到愉悦。 该插件的使用方法可能包括引入CSS和JavaScript文件,然后通过特定的类名或ID来应用样式。对于前端开发者来说,了解CSS和JavaScript的...

    asp.net 真正的下拉日期控件

    描述中的“花了一上午的时间终于搞定”表明这个问题可能涉及到一定的定制工作,而不是简单的内置控件使用,同时作者对那些提供无效资源的行为表示不满,强调了这个问题的实际解决价值。 ASP.NET中的日期选择控件...

    日历下拉框和添加下拉框

    在网页设计中,日历下拉框是一种常见的交互元素,常用于输入日期或者选择日期的场景,如注册、预约、事件安排等。本教程将详细讲解如何在JSP页面上实现一个日历下拉框,并通过JavaScript进行动态交互。 首先,我们...

    jQuery点击弹出下拉框选择日期特效源码.zip

    总的来说,jQuery点击弹出下拉框选择日期特效源码结合了jQuery的事件处理、DOM操作以及CSS样式,提供了一种用户友好的日期选择方式。通过理解和应用这些概念,你可以为你的网站添加更多互动性和功能。

    JQuery 年月日三级下拉框联动

    一个直制的JQuery 年月日三级下拉框联动 使用方法非常简单 &lt;title&gt;JQuery 年月日三下拉框联动 &lt;script src="jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt; ...

    Java下拉框监听,加入界面,切换界面的处理

    下拉框在GUI应用程序中广泛使用,例如设置配置、选择日期、时间等。本篇文章将深入探讨如何在Java中实现下拉框的监听、将其添加到界面以及处理界面的切换。 首先,Java提供了两种主要的API来创建和操作下拉框:Java...

    利用jsp关联下拉列表日期

    本文将详细介绍如何使用JSP来实现一个简单的日期选择器,其中包含了三个关联的下拉列表:年份、月份和日期。当用户选择年份或月份时,日期下拉列表会自动更新以显示正确的日期范围。 #### 二、代码分析 首先,我们...

    日 期 下 拉 框控件C#

    在标题提到的"日期下拉框控件"中,我们可能是指对DateTimePicker进行了一些自定义或扩展,以增加特定的功能。 首先,"按钮风格"可能指的是将日期选择控件设计成类似按钮的外观,使得用户点击后会展开日期选择的日历...

    iOS 下拉框,可自动识别向上向下展开

    这种功能在很多场景下都非常实用,例如在有限的屏幕空间内展示多项选择,如地址选择、日期选择等。 在iOS开发中,通常我们会用到系统的UIPickerView或UIPopoverController来实现类似的功能,但这些组件可能无法满足...

    C# 生成Excel 动态列 创建下拉框 单元格样式定义

    EPPlus是.NET Framework和.NET Core平台上的一个开源库,它允许开发者以一种简单、高效的方式操作Excel文件。安装EPPlus库可以通过NuGet包管理器进行。 1. **动态列创建**:在C#中,动态列生成的关键在于理解Excel...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    它支持多种类型的输入,如文本、选择框、日期等,其中就包括了下拉框(select)编辑类型。这个功能使得用户可以直接在页面上修改表格数据,而无需跳转到新的页面或者弹出模态框。 在Bootstrap Table中集成`...

    jQuery select下拉框美化插件.zip

    在实际应用中,开发者可以通过引入jQuery库和jQuery UI库,然后加载这个插件的JavaScript和CSS文件,通过简单的配置和调用插件方法,即可实现下拉框的美化和功能增强。例如,可能需要设置插件的选项、绑定事件监听器...

    JS实现简洁的时间日期控件

    例如,可以创建一个`&lt;div&gt;`作为日期选择器容器,然后在其中添加年、月、日的下拉框,并为每个下拉框设置`onchange`事件,当用户选择新值时,更新日期并刷新显示。 在压缩包中的"原生JS实现简洁的时间日期控件代码...

    javascript经典特效---下拉框显示当前时间.rar

    总的来说,"下拉框显示当前时间"的实现是一个简单的JavaScript应用实例,它展示了如何利用JavaScript动态更新页面内容以及与HTML元素交互。这个功能在网页表单、实时监控或其他需要实时显示时间的场景中十分实用。...

Global site tag (gtag.js) - Google Analytics