原帖及讨论:http://bbs.bccn.net/thread-99670-1-1.html 有人想要学习下纯javascript联动的一些技巧,我这里就以日期的联动为例,附上一些代码 至于复杂的省市区联动,不建议用纯javascript的,而是用ajax的方式,该不在此讨论范围内,想要了解ajax是什么,最好去ajax板块看看
首先贴出的是普通编码下的日期联动代码: 1楼贴出的是整理过后的可重用框架代码,需要prototype框架支持(懒得写独立于prototype框架的代码了……)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>日期动态联动演示</title> <script type="text/javascript"> var oYears,oMonths,oDays,isLeapYear; var iy,im,id; window.onload=function () { initDate(); } function initDate() { isLeapYear=false; oYears=document.getElementById('years'); //获得year的select oMonths=document.getElementById('months'); //获得month的select oDays=document.getElementById('days'); //获得day的select initYears(); //初始化年份 //设定三个select的onChange事件 oYears.onchange=chgYear; oMonths.onchange=chgMonth; oDays.onchange=chgDay; } function initYears() { oYears.length=1; var cYear=new Date().getYear(); for (var i=cYear-20;i<=cYear;i++) //从当前年份前20年开始循环,可以自己更改循环区间 { var o=new Option(i.toString(),i.toString()); oYears.add(o); } } function chgYear() { try { isLeapYear=false; var year=parseInt(this.options[this.selectedIndex].value); //获得选择的年份 //判断是否是闰年,不懂公式的自己百度 if (year%4==0) isLeapYear=true; if (year%100==0 && year%400!=0) isLeapYear=false; if (year%100==0 && year%400==0) isLeapYear=true; initMonths(); //为了体现联动的效果,这里没选择一次年份都初始化一次月份 } catch(e){;} } function initMonths() { oMonths.length=1; for (var i=1;i<13;i++) //月份是1~12月 { var o=new Option(i.toString(),i.toString()); oMonths.add(o); } } function chgMonth() { try { var month=this.options[this.selectedIndex].value; if (month!='') { var days; if (month.replace(/(1|3|5|7|8|10|12)/ig,'')=='') //判断是否为大月 days=31; else if (month.replace(/(4|6|9|11)/ig,'')=='') //判断是否为小月 days=30; else if (month=='2' && isLeapYear) //判断当是2月时,是否为闰月 days=29; else days=28; initDays(days); } } catch(e) {;} } function initDays(days) { oDays.length=1; for (var i=1;i<=parseInt(days);i++) //循环显示天数 { var o=new Option(i.toString(),i.toString()); oDays.add(o); } } function chgDay() { //改变日期时,调用该函数 try { var year=oYears.options[oYears.selectedIndex].value; var month=oMonths.options[oMonths.selectedIndex].value; var day=this.options[this.selectedIndex].value; alert('您选择了'+year+'年'+month+'月'+day+'日'); } catch(e) {;} } </script> </head>
<body> <div> <select id="years"> <option value="">选择年份</option> </select> <select id="months"> <option value="">选择月份</option> </select> <select id="days"> <option value="">选择日子</option> </select> </div> </body> </html> 可重用的框架:xDynDate.js及其下载:http://bbs.bccn.net/thread-99670-1-1.html  
|