注冊時,在填寫生日的時候,月份的天數會隨著月份的改變而改變,這個小功能在很多的地方都用得到哦!
<5>月份天數隨月份改變
PHP代碼
[php]
<select name="month" id="month" onchange="monthDays(this.value);"> //onchange事件
<?php
for($i=1;$i<=12;$i++)
{
echo "<option value=".$i.">";
echo $i;
echo "</option>";
}
?>
</select>月
<select name="day" id="day">
<?php
for($i=1;$i<=31;$i++)
{
echo "<option value=".$i.">";
echo $i;
echo "</option>";
}
?>
</select>日
<select name="month" id="month" onchange="monthDays(this.value);"> //onchange事件
<?php
for($i=1;$i<=12;$i++)
{
echo "<option value=".$i.">";
echo $i;
echo "</option>";
}
?>
</select>月
<select name="day" id="day">
<?php
for($i=1;$i<=31;$i++)
{
echo "<option value=".$i.">";
echo $i;
echo "</option>";
}
?>
</select>日
Js代碼
[javascript]
function monthDays(month)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(month==2)
{
document.getElementById("day").length=0; //先把月份天數的select的option清空
for(i=1;i<=29;i++)
{
document.getElementById("day").options.add(new Option(i,i));
}
}
else if(month==4||month==6||month==9||month==11)
{
document.getElementById("day").length=0;
for(i=1;i<=30;i++)
{
document.getElementById("day").options.add(new Option(i,i));
}
}
else
{
document.getElementById("day").length=0;
for(i=1;i<=31;i++)
{
document.getElementById("day").options.add(new Option(i,i));
}
}
}
}
xmlhttp.open("GET","index.php",true);
xmlhttp.send();
}
function monthDays(month)
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
if(month==2)
{
document.getElementById("day").length=0; //先把月份天數的select的option清空
for(i=1;i<=29;i++)
{
document.getElementById("day").options.add(new Option(i,i));
}
}
else if(month==4||month==6||month==9||month==11)
{
document.getElementById("day").length=0;
for(i=1;i<=30;i++)
{
document.getElementById("day").options.add(new Option(i,i));
}
}
else
{
document.getElementById("day").length=0;
for(i=1;i<=31;i++)
{
document.getElementById("day").options.add(new Option(i,i));
}
}
}
}
xmlhttp.open("GET","index.php",true);
xmlhttp.send();
}
這種效果還是用到Ajax的局部刷新技術，歡迎大家交流學習。（未完待續）
摘自 wyzhangchengjin123
