[英]Removing past and current month options from selectbox based on year selected
I am creating a form that includes two select boxes to allow users to choose a month and year to cancel a membership. 我正在创建一个包含两个选择框的表单,以允许用户选择月份和年份来取消会员资格。 The month selected should not be the current month nor past months.
选择的月份不应是当月或过去的月份。 I added some jQuery to pre-select the month after the current one, but it still allows users to select a previous month if they want.
我添加了一些jQuery来预选当前月份之后的月份,但是它仍然允许用户根据需要选择前一个月份。
What I would like to implement is a script that removes options based on the year selected. 我要实现的是一个脚本,该脚本可根据所选年份删除选项。 For example: If 2016 is selected (and we're in October 2016 now), the script should remove options 1 through 10.
例如:如果选择了2016(现在是2016年10月),则脚本应删除选项1到10。
I suspect it is not too complicated, but my knowledge of jQuery is very limited. 我怀疑它不太复杂,但是我对jQuery的了解非常有限。 Thanks in advance.
提前致谢。
Codepen: http://codepen.io/ricardoh/pen/vXpdvQ Codepen: http ://codepen.io/ricardoh/pen/vXpdvQ
Here is the HTML: 这是HTML:
<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="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
And the jQuery: 和jQuery:
$(function(){
var month = new Date().getMonth() + 1;
if( month > 12 ) month = 1;
document.getElementById("month").options[month].selected = true;
});
How about something like this? 这样的事情怎么样? JSFiddle
的jsfiddle
function adjustMonths() {
var thisYear = new Date().getFullYear() + ""; //Get current year
var nextMonth = new Date().getMonth()+2 + ""; //Get next month
var selectedYear = $('#year option:selected').val(); //Selected Year
if (nextMonth .length == 1) {
nextMonth = "0" + nextMonth ; //Add preceding "0" to single-digit month
}
var yearAndMonth = parseInt(thisYear+nextMonth); //Create integer of year+month
$('#month option').each(function() { //Loop through all month options
var selectMonth = $(this).prop('value'); //Get option value
if (selectMonth.length == 1) {
selectMonth = "0" + selectMonth; //Add preceding "0" to single-digit month
}
if (parseInt(selectedYear + selectMonth) < yearAndMonth) {
$(this).hide(); //If the selected year + this month are less than the current year and month, hide this month
} else {
$(this).show(); //Otherwise, show it
}
});
$("#month option").prop('selected', false); //Unselect all
$("#month").find("option:visible:first").prop('selected', true); //Select first visible month from dropdown
}
$(document).ready(function() {
adjustMonths(); //run script on pageload
$('#year').change(function() {
adjustMonths(); //run script when changing the year dropdown
})
});
I was working on this while I noticed that the question had been answered and accepted, figured a second answer couldn't hurt. 我正在研究此问题,而我发现问题已得到回答并被接受,认为第二个答案不会有任何问题。
$(function(){ var monthElem = document.getElementById('month'); var yearElem = document.getElementById('year'); var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; var createOption = function(monthID) { var elem = document.createElement('option'); elem.value = monthID+1; elem.text = months[monthID]; return elem; }; var evt = document.createEvent('HTMLEvents'); yearElem.addEventListener('change', function() { var now = new Date(), tmp; var month = now.getMonth(); if(now.getFullYear() === parseInt(this.value)) { tmp = month; while(tmp >= 0) monthElem.remove(tmp--); } else { tmp = monthElem.length = 0; while(tmp < 12) monthElem.add(createOption(tmp), tmp++); } }, false); evt.initEvent('change', false, true); yearElem.dispatchEvent(evt); });
<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="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> </select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.