项目中用到一个级联、动态下拉选择日期框。我以前也收集过关于地区级联的,那时候是用别人代码。今天这个虽然简单但感觉自己还是进步满大,最起码是自己亲手写出来的。o(∩_∩)o...哈哈
首先是php代码生成一个年月日的下拉组件。
1
<?
php
2 echo " <select id=\ "" .$statement. " _year\ " οnchange=\ " 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\ " οnchange=\ " 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
2 echo " <select id=\ "" .$statement. " _year\ " οnchange=\ " 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\ " οnchange=\ " 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 */
5 function 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 */
69 function resetDate(obj)
70 {
71 var state_Flag = obj+"_day";
72 document.getElementById(state_Flag).selectedIndex=0;
73 changDay(obj);
74}
2 * @breif: 根据月份 以及年份调整日期的下拉选择天数
3 *
4 */
5 function 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 */
69 function 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...哈哈)必定那不是他考题的目的吧。