项目中用到一个级联、动态下拉选择日期框。我以前也收集过关于地区级联的,那时候是用别人代码。今天这个虽然简单但感觉自己还是进步满大,最起码是自己亲手写出来的。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
<?
php2
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
*/
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
}else51

{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: 选择年份 或者月份后 重置日期为168
*/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...哈哈)必定那不是他考题的目的吧。
1752

被折叠的 条评论
为什么被折叠?



