JS实现html下拉菜单列表进行年月日选择

使用JS实现年月日下拉列表的选择
如下图：


具体操作：
两个js文件，设置效果
在.html中导入两个外部js文件

jquery.time.js

$(function () {
	$.ms_DatePicker({
            YearSelector: ".sel_year",
            MonthSelector: ".sel_month",
            DaySelector: ".sel_day"
    });
});

birthday.js

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

在.html文件的head内导入script

<script type="text/javascript" src="js/jquery.time.js"></script>
<script type="text/javascript" src="js/birthday.js"></script>

主体部分的年月日组件代码

<select class="sel_year" name="YYYY">
	<option value="">请选择</option>
</select>
<font>年</font>
<select class="sel_month" name="MM">
	<option value="">请选择</option>
</select>
<font>月</font>
<select class="sel_day" name="DD">
	<option value="">请选择</option>
</select>
<font>日</font>