javascript 使用当前日期、月份和年份填充下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51659414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate dropdown list with current day, month and year
提问by NewJavaEnthusiast
I am probably asking an easy question for you, but I am still a newbie, so please someone help me. I have this html and jQuery code:
我可能问你一个简单的问题，但我仍然是一个新手，所以请有人帮助我。我有这个 html 和 jQuery 代码：
$(document).ready(function() {
var d = new Date();
var month = d.getMonth() + 1;
var year = d.getFullYear();
$("#month").val(month);
$("#year").val(year);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="year">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>So the question is: How can I populate one more dropdown showing current day, but also showing all the days from the month, based on if they are 30, 31, 28 or even leap year (29 days in Fevruary)? Any help will be appreciated. P.S. And also can this be done more dynamically ?
所以问题是：如何根据它们是 30、31、28 甚至闰年（Fevruary 的 29 天），再填充一个显示当前日期的下拉列表，同时还显示该月的所有天数？任何帮助将不胜感激。PS，这也可以更动态地完成吗？
回答by Calvin Nunes
Well, instead of writing a lot of optionstag, why not let a loopdo it for you...
check my code below please, I'll give a brief explanation below that.
好吧，与其写很多options标签，不如让一个loop为你做……请检查我下面的代码，我将在下面给出一个简短的解释。
$(document).ready(function() {
const monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
var qntYears = 4;
var selectYear = $("#year");
var selectMonth = $("#month");
var selectDay = $("#day");
var currentYear = new Date().getFullYear();
for (var y = 0; y < qntYears; y++){
let date = new Date(currentYear);
var yearElem = document.createElement("option");
yearElem.value = currentYear
yearElem.textContent = currentYear;
selectYear.append(yearElem);
currentYear--;
}
for (var m = 0; m < 12; m++){
let monthNum = new Date(2018, m).getMonth()
let month = monthNames[monthNum];
var monthElem = document.createElement("option");
monthElem.value = monthNum;
monthElem.textContent = month;
selectMonth.append(monthElem);
}
var d = new Date();
var month = d.getMonth();
var year = d.getFullYear();
var day = d.getDate();
selectYear.val(year);
selectYear.on("change", AdjustDays);
selectMonth.val(month);
selectMonth.on("change", AdjustDays);
AdjustDays();
selectDay.val(day)
function AdjustDays(){
var year = selectYear.val();
var month = parseInt(selectMonth.val()) + 1;
selectDay.empty();
//get the last day, so the number of days in that month
var days = new Date(year, month, 0).getDate();
//lets create the days of that month
for (var d = 1; d <= days; d++){
var dayElem = document.createElement("option");
dayElem.value = d;
dayElem.textContent = d;
selectDay.append(dayElem);
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>There's a variable called qntYears, there you set how many years back from current year you want to show in the selectof years...
有一个名为 的变量qntYears，您可以在其中设置要在select几年中显示的当前年份的回溯数...
after that, there's a loop adding all months, nothing special here.
在那之后，有一个循环添加所有月份，这里没有什么特别的。
The last part is the important one, I added a changecallback to the year and month selects, when it is changed it recreates (using a loop) the days based on the year and current month. The functionthat do this is the AdjustDays().
最后一部分是重要的部分，我添加了一个change回调到 year 和 month selects，当它被改变时，它重新创建（使用 a loop）基于年和当月的天数。该function说这样做是AdjustDays()。
回答by Ashu
$(document).ready(function() {
var d = new Date();
//To test 29th Feb 2016 uncomment the below line
//d = new Date(2016, 01, 29, 10, 33, 30, 0); //
var month = d.getMonth() + 1;
var year = d.getFullYear();
var date = d.getDate();
$("#month").val(month);
$("#year").val(year);
$("#date").empty();
if(month=="1"){
if($(year).val()%4 == 0){
for(i=1;i<=29;i++){
$("#date").append($("<option></option>").attr("value", i).text(i));
}
}else{
for(i=1;i<=28;i++){
$("#date").append($("<option></option>").attr("value", i).text(i));
}
}
}
else if(month=="9" || month=="4" || month=="6" || month=="11"){
for(i=1;i<=30;i++){
$("#date").append($("<option></option>").attr("value", i).text(i));
}
}
else{
for(i=1;i<=31;i++){
$("#date").append($("<option></option>").attr("value", i).text(i));
}
}
$("#date").val(date);
$('#text').html(d);
//displayCalGrid(month, year);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="date">
</select>
<select id="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="year">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<br>
Today's Date is : <label id="text"></label>回答by James Yun
put an event listener on the month drop down. from there you can create a list of "days" in an empty select box. I'd also use moment.js because its additional functionality to the Date object. add some validation or make each of the select boxes have a default selected value.
在月份下拉菜单上放置一个事件侦听器。从那里你可以在一个空的选择框中创建一个“天”列表。我还会使用 moment.js，因为它为 Date 对象提供了附加功能。添加一些验证或使每个选择框都有一个默认的选定值。
using plain ole javascript.
使用普通的 ole javascript。
let year = document.getElementById('year');
let month = document.getElementById('month');
let days = document.getElementById('days');
month.addEventListener('change', function(event) {
// do calculations here to find out how many days in month
let dateString = month + "-" + year;
let dayLength = moment(dateString, "MM-YYYY").daysInMonth();
// wipe out all of the days
days.innerHTML = "";
// add back all the days.
for(let g = 1; g < dayLength + 1; g++) {
let option = document.createElement('option');
option.value = g;
days.appendChild(option);
}
});
this is just one way, there are other ways of appending the options. like using documentFragment https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
这只是一种方式，还有其他附加选项的方式。喜欢使用 documentFragment https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
or you can have small templates that are already generated and placed in the dom so all you have to do is just empty out dom element containers and add dom elements back in.
或者您可以拥有已经生成并放置在 dom 中的小模板，因此您所要做的就是清空 dom 元素容器并重新添加 dom 元素。
