您的位置：首页 > Web前端 > JavaScript

js实现下拉框联动选中日期（select 日期联动更改）

2014-08-05 18:17 537 查看

html代码

<head>
<script type="text/javascript" src="/js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript" src="/js/party.js" ></script>
</head>
<body>
<table style="text-align: right;">
<tr>
<td>出生日期：</td>
<td><select id="birth_year" onchange="setDays(this,birth_month,birth_day);">
<option value="">年</option>

</select> <select id="birth_month" onchange="setDays(birth_year,this,birth_day);">
<option value="">月</option>

</select> <select id="birth_day">
<option value="">日</option>

</select></td>
</tr>
<tr>
</table>
</body>

js 代码

$(document).ready(function() {
var i = -1;
// 添加年份，从1910年开始
for (i = 1910; i <= new Date().getFullYear(); i++) {
addOption(birth_year, i, i - 1909);
/*// 默认选中1988年
if (i == 1988) {
birth_year.options[i-1910].selected = true;
}*/
}
// 添加月份
for (i = 1; i <= 12; i++) {
addOption(birth_month, i, i);
}
// 添加天份，先默认31天
for (i = 1; i <= 31; i++) {
addOption(birth_day, i, i);
}

//$("#birth_month"). birth_year  birth_day
});

// 设置每个月份的天数
function setDays(year, month,day) {
var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var yea = year.options[year.selectedIndex].text;
var mon = month.options[month.selectedIndex].text;
var num = monthDays[mon - 1];
if (mon == 2 && isLeapYear(yea)) {
num++;
}
for (var j = day.options.length - 1; j >=num; j--) {
           day.remove(j);
       }
       for (var i = day.options.length; i <= num; i++) {
           addOption(birth_day,i,i);
       }
}

// 判断是否闰年
function isLeapYear(year)
{
return (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0));
}

// 向select尾部添加option
function addOption(selectbox, text, value) {
var option = document.createElement("option");
option.text = text;
option.value = value;
selectbox.options.add(option);
}

原文地址：http://www.cnblogs.com/qingliuyu/archive/2010/10/21/1857586.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js javascript select 日期联动

相关文章推荐

新的分享

章节导航