jQuery年月日（生日）联动选择器

效果图：

源码说明:

1、JQuery，核心代码部分：

(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();
	}
} 

});
})(jQuery);

2、html部分+js调用核心方法：

<div id="main">
   <div class="demo">
      <p>
        【不带默认值】：<br/>
        <label>生日：</label>
        <select id="sel_year"></select>年
        <select id="sel_month"></select>月
        <select id="sel_day"></select>日
      </p>
      
      <p>
        【带默认值】：<br/>
        <label>生日：</label>
        <select class="sel_year" rel="2016"></select>年
        <select class="sel_month" rel="10"></select>月
        <select class="sel_day" rel="26"></select>日
      </p>
        
  </div>
</div>
<script src="http://www.youhutong.com/static/js/jquery.js"></script>
<script type="text/javascript" src="birthday.js"></script>
<script>  
$(function () {
  // 初始化（不带默认值）
  $.ms_DatePicker();
  // 初始化（带默认值）
  $.ms_DatePicker({
            YearSelector: ".sel_year",
            MonthSelector: ".sel_month",
            DaySelector: ".sel_day"
    });
}); 
</script>

还有什么不懂的，可以直接下载案例源码去研究

转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/86.html

　　1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
　　2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
　　3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
　　4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意