如何在以下情况下在三个日期下拉（年，月，日）中设置默认的“选择”选项？

Question

为了取得用户的出生日期，我在我的网站上使用了三个单独的下拉列表（三个HTML选择控件）。为了这个东西的工作，我用了一个jQuery库，标题为jquery.dateLists.min.js。我正在使用jquery-1.9.1.min.js和jquery-ui-1.10.0.custom.min.js。

现在我的问题是，当页面加载日期下拉列表中选择了当前日期值，蛾dropdowm选择当前月份，并且年份下拉列表中包含年份（目前是1914年）中的第一年选择。我想将值为“”的项目设置为默认选定值。我应该如何实现这一目标？为了您的参考，我将下面的代码以及它的HTML实现。

jquery.dateLists.min.js

/* 
* jQuery dateDropDowns 
* 
* url  http://www.amdonnelly.co.uk/jquery/date-drop-down-lists 
* author Alan Donnelly 2011 
* version 1.0.1 
* license MIT and GPL licenses 
*/ 
(function(a){a.fn.dateDropDowns=function(k){var g={dateFormat:"dd-mm-yy",monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],yearStart:"1914",yearEnd:"2000"},k=a.extend(g,k);return this.each(function(){function l(){var c=d.getMonth()+1,p="",f=1;_daysInMonth=m(c,d.getFullYear())+1;a("#"+e+"_list").children().length<_daysInMonth?f=a("#"+e+"_list").children().length+1:a("#"+e+"_list").children().remove();for(_x=f;_x<_daysInMonth;_x++)c=d.getDate()==_x?"selected='true'": "",p+="<option value='"+_x+"' "+c+">"+_x+"</option>";a("#"+e+"_list").append(p)}function m(c,a){var d=31;c==4||c==6||c==9||c==11?d=30:c==2&&(d=a%4==0?29:28);return d}function n(){var c=d.getDate(),a=d.getMonth()+1,f=d.getFullYear(),b=g.dateFormat;b.indexOf("DD")>-1&&c.toString().length<2&&(c="0"+c);b.indexOf("MM")>-1&&a.toString().length<2&&(a="0"+a);b=g.dateFormat.toLowerCase();b=b.replace("dd",c);b=b.replace("mm",a);b=b.replace("yy",f);j.val(b)}var j=a(this);j.html();var b=j.attr("id")+"_dateLists", e=b+"_day",h=b+"_month",i=b+"_year",k=j.val(),d=new Date,o=g.dateFormat.indexOf("/")>-1?"/":"-";(function(){if(k.length>0){var a=g.dateFormat.split(o),b=k.split(o),f=new Date;for(_x=0;_x<b.length;_x++)a[_x].toLowerCase().indexOf("d")>-1?f.setDate(b[_x]):a[_x].toLowerCase().indexOf("m")>-1?f.setMonth(b[_x]-1):a[_x].toLowerCase().indexOf("y")>-1&&f.setYear(b[_x]);d=f}})();(function(){var c=g.dateFormat.split(o),d=j;j.replaceWith("<div id='"+b+"' class='dateLists_container'></div>");for(_x=0;_x<c.length;_x++)c[_x].toLowerCase().indexOf("d")> -1?(a("#"+b).append("<div id='"+e+"' class='day_container'>"),a("#"+e).append("<select id='"+e+"_list' name='"+e+"_list' class='list'></select>"),a("#"+b).append("</div>")):c[_x].toLowerCase().indexOf("m")>-1?(a("#"+b).append("<div id='"+h+"' class='month_container'>"),a("#"+h).append("<select id='"+h+"_list' name='"+h+"_list' class='list'></select>"),a("#"+b).append("</div>")):c[_x].toLowerCase().indexOf("y")>-1&&(a("#"+b).append("<div id='"+i+"' class='year_container'>"),a("#"+i).append("<select id='"+ i+"_list' name='"+i+"_list' class='list'></select>"),a("#"+b).append("</div>"));a("#"+b).append(d);j.hide()})();l();(function(){a("#"+h+"_list").children().remove();for(_x=0;_x<12;_x++){var c=d.getMonth()==_x?"selected='true'":"";a("#"+h+"_list").append("<option value='"+_x+"' "+c+">"+g.monthNames[_x]+"</option>")}})();(function(){a("#"+i+"_list").children().remove();for(_x=parseInt(g.yearStart);_x<parseInt(g.yearEnd)+1;_x++){var c=d.getFullYear()==_x?"selected='true'":"";a("#"+i+"_list").append("<option value='"+ _x+"' "+c+">"+_x+"</option>")}})();(function(){a("#"+e+"_list").change(function(){d.setDate(a("#"+e+"_list").val());n()});a("#"+h+"_list").change(function(){var c=parseInt(a("#"+h+"_list").val()),b=d.getDate();_daysInMonth=m(c+1,d.getFullYear());b>_daysInMonth&&(b=_daysInMonth);d=new Date(d.getFullYear(),c,b,0,0,0,0);l();n()});a("#"+i+"_list").change(function(){var b=a("#"+i+"_list").val(),e=d.getDate(),f=d.getMonth();_daysInMonth=m(f+1,b);e>_daysInMonth&&(e=_daysInMonth);d=new Date(b,f,e,0,0,0,0); l();n()})})()})}})(jQuery); 

实现如下（所有必需的上面说的jQuery库已经被包括在内。）

<script language="javascript"> 
/*The jQuery code to work the functionality*/ 
$().ready(function() { 
    $('#dob').dateDropDowns({dateFormat:'yy-mm-dd'}); 
}); 
</script> 

<style type="text/css"> 

    .dateLists_container { 
    } 

    .dateLists_container .list { 
    float:left; 
    } 

    .dateLists_container .day_container { 

    } 

    .dateLists_container .day_container .list { 
    margin-right:10px; 
    } 

    .dateLists_container .month_container { 
    } 

    .dateLists_container .month_container .list { 
    margin-right:10px; 
    margin-left:10px; 
    } 

    .dateLists_container .year_container{ 

    } 

    .dateLists_container .year_container .list{ 

    } 

</style> 

<div class="col-xs-6"> 
    <label for="name" class="col-lg-6">Date of Birth<span style="color:#FF0000">*</span></label> 
    <div class="col-lg-6"> 
    <input class="form-control date_control" type="text" name="dob" id="dob" value=""> 
    </div> 
</div> 

如果你想检查功能演示可在以下网址获得：

http://www.amdonnelly.co.uk/jquery/date-drop-down-lists 

有人可以在这方面帮助我吗？提前致谢。

Answer 1

您需要使用Javascript功能来获取当前的日期和它时，页面加载获取设置选项值，使他们能够在选项“选择”。

试一下这个

var current_date = new Date(); 
    var dd = current_date.getDate(); // day 
    var MM = current_date.getMonth(); // month 
    var yyyy = current_date.getFullYear(); //year 

Answer 2

我认为你在寻找什么是一样的东西：

$('#listid').prepend("<option>Select</option>"); 
    $('#listid').prop("selected", true); 

这将添加一个新的选项列表的开始，并选择它，但是它将打破插件。

如果你仍然想使用它，我摸索出了旧的源代码，并将其上传https://github.com/amdonnelly/jQuery-Date-List-Plugin

如果我有时间，我会尝试，并添加了一个选项，默认的消息。

Answer 3

  $("#sub2sub").append("<option value='0'>--Select--</option>"); 

    var drop = $("#sub2cate"); 
    drop[0].selectedIndex = 0; 
<tr> 

         <td> 
          <select id="sub2sub" style="width: 144px;"> 

          </select> 
         </td> 
        </tr>