如何限制 jquery 下拉列表并仅动态显示当前和前几个月

Question

我试图在下拉列表中仅显示当前和上个月，并希望从下拉列表中隐藏/删除其他月份。此外，默认选择应为 - 到当月

通过下面的代码，我可以实现 -

• 在下拉列表中显示月份
• 默认选择当前月份
• 禁用即将到来的月份

我正在寻找：

• 默认选择当前月份
• 在下拉列表中仅显示上个月

任何人都可以帮助或指导。提前感谢！！

法典：

$(document).ready(function() {
debugger;
var currentDate = new Date();
var curMonth = currentDate.getMonth();
$('#monthsDropdown').prop('selectedIndex', curMonth);
$('#monthsDropdown option:gt(' + curMonth + ')').prop('disabled', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select id="monthsDropdown">
<option value='1'>Janaury</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>
</div>

Answer 1

替换你的css，它将在下个月全部隐藏

$('#monthsDropdown option:gt(' + curMonth + ')').css('display', 'none');

$(document).ready(function() {
debugger;
var currentDate = new Date();
var curMonth = currentDate.getMonth();
var preMonth = currentDate.getMonth() - 1;
$('#monthsDropdown').prop('selectedIndex', curMonth);
$('#monthsDropdown option:lt(' + preMonth + ')').css('display', 'none');
$('#monthsDropdown option:gt(' + curMonth + ')').css('display', 'none');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select id="monthsDropdown">
<option value='1'>Janaury</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>
</div>

Answer 2

$(document).ready(function(){
var objMonthMapping = {
1     : 'January',
2     :   'February',
3     :   'March',
4     :   'April',
5     :   'May',
6     :   'June',
7     :   'July',
8     :   'August',
9     :   'September',
10    :   'October',
11    :   'November',
12    :   'December'
};
var intCurMonth     =   new Date().getMonth() + 1;
var intPrevMonth    =   (intCurMonth - 1) ? (intCurMonth - 1) : 12;
$('<option>').val(intPrevMonth).text(objMonthMapping[intPrevMonth]).appendTo('#monthsDropdown');
$('<option>').val(intCurMonth).text(objMonthMapping[intCurMonth]).appendTo('#monthsDropdown');
$('#monthsDropdown').val(intCurMonth);
});

这是 HTML：

<div> <select id="monthsDropdown"> </select> </div>

这些代码行将在下拉列表中提供当前月份和上个月的选项。

Answer 3

你可以这样做。 法典：

$(document).ready(function(){
$('select option').hide();
var d = new Date();
month = d.getMonth() + 1;
$('select option[value='+month+']').attr("selected",true).prev().css( 
"display", "block" );
$('select option[value='+month+']').attr("selected",true).css( 
"display", "block" );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select id="monthsDropdown">
<option value='1'>Janaury</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>
</div>