1. 程式人生 > >JQuery年月日三級聯動(生日)

JQuery年月日三級聯動(生日)

<!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>