您的位置：首页 > Web前端 > JQuery
JQuery年月日三级联动(生日)

2017-02-10 11:06 253 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery年月日三级联动(生日)</title>
<style type="text/css">
.demo{width:380px; margin:80px 0 0 350px;}
.demo p{line-height:40px; font-size:16px}
</style>
</head>
<body>
<div class="container">
<div class="demo">
<p>
添加：<br/>
<label>生日：</label>
<select id="select_year" name="year"></select>年
<select id="select_month" name="month"></select>月
<select id="select_day" name="day"></select>日
</p>
<p>
修改【rel】：<br/>
<label>生日：</label>
<select id="select_year2" rel="2015" name="year2"></select>年
<select id="select_month2" rel="12" name="month2"></select>月
<select id="select_day2" rel="13" name="day2"></select>日
</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript">
(function($){
$.extend({
ms_DatePicker: function (options) {
var defaults = {
YearSelector: "#sel_year",
MonthSelector: "#sel_month",
DaySelector: "#sel_day",
FirstText: "--",
FirstValue: 0
};
var opts = $.extend({}, defaults, options);
var $YearSelector = $(opts.YearSelector);
var $MonthSelector = $(opts.MonthSelector);
var $DaySelector = $(opts.DaySelector);
var FirstText = opts.FirstText;
var FirstValue = opts.FirstValue;

// 初始化
var str = "<option value=\"" + FirstValue + "\">" + FirstText + "</option>";
$YearSelector.html(str);
$MonthSelector.html(str);
$DaySelector.html(str);

// 年份列表
var yearNow = new Date().getFullYear();
var yearSel = $YearSelector.attr("rel");
for (var i = yearNow; i >= 1900; i--) {
var sed = yearSel==i?"selected":"";
var yearStr = "<option value=\"" + i + "\" " + sed+">" + i + "</option>";
$YearSelector.append(yearStr);
}

// 月份列表
var monthSel = $MonthSelector.attr("rel");
for (var i = 1; i <= 12; i++) {
var sed = monthSel==i?"selected":"";
var monthStr = "<option value=\"" + i + "\" "+sed+">" + i + "</option>";
$MonthSelector.append(monthStr);
}

// 日列表(仅当选择了年月)
function BuildDay() {
if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) {
// 未选择年份或者月份
$DaySelector.html(str);
} else {
$DaySelector.html(str);
var year = parseInt($YearSelector.val());
var month = parseInt($MonthSelector.val());
var dayCount = 0;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
dayCount = 31;
break;
case 4:
case 6:
case 9:
case 11:
dayCount = 30;
break;
case 2:
dayCount = 28;
if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
dayCount = 29;
}
break;
default:
break;
}

var daySel = $DaySelector.attr("rel");
for (var i = 1; i <= dayCount; i++) {
var sed = daySel==i?"selected":"";
var dayStr = "<option value=\"" + i + "\" "+sed+">" + i + "</option>";
$DaySelector.append(dayStr);
}
}
}
$MonthSelector.change(function () {
BuildDay();
});
$YearSelector.change(function () {
BuildDay();
});
if($DaySelector.attr("rel")!=""){
BuildDay();
}
} // End ms_DatePicker
});
})(jQuery);
</script>
<script language="javascript">
$(function() {
$.ms_DatePicker({
YearSelector: "#select_year",
MonthSelector: "#select_month",
DaySelector: "#select_day"
});
$.ms_DatePicker({
YearSelector: "#select_year2",
MonthSelector: "#select_month2",
DaySelector: "#select_day2"
});
});
</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： JQuery 年月日三级联动生日
相关文章推荐
新的分享
章节导航