I have a payment system, which has a select that displays the months since the system started, follows the code below:
<select name="situacao">
<option>Fevereiro/2018</option>
<option>Janeiro/2018</option>
<option>Dezembro/2017</option>
<option>Novembro/2017</option>
</select>
What I need is that when I start the next month, in the March case, I add the March option automatically, and so on in the coming months.
As I mentioned in the above comment, here is a solution on the client side. I left comments in the code, if in doubt you can ask.
$(document).ready(function(){
var date = new Date(); //invoca o metodo Date
var mes = date.getMonth() +1;// pega o mes atual
var ano = date.getFullYear();
switch(mes) {//faz um switch para saber o dia e acrescentar o option de acordo
case 1: criaOption('Janeiro')
break;
case 2 : criaOption('Fevereiro')
break;
case 3 : criaOption('Março')
break;
case 4 : criaOption('Abril')
break;
case 5 : criaOption('Maio')
break;
case 6 : criaOption('Junho')
break;
case 7 : criaOption('Julho')
break;
case 8 : criaOption('Agosto')
break;
case 9 : criaOption('Setembro')
break;
case 10 : criaOption('Outubro')
break;
case 11 : criaOption('Novembro')
break;
case 12 : criaOption('Dezembro')
break;
}
function criaOption(mes) {
var opt = "<option value='"+mes+"'> "+mes+" / "+ano+" </option>"
$('#dt').prepend(opt); //adiciona o mes no inicio, caso queira adiconar no final, use o append()
return opt;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="dt">
<option value="Dezembro"> Dezembro <option>
</select>This code should help you, but it is not elegant;
var meses = new Array(12);
meses[0] = "Janeiro";
meses[1] = "Fevereiro";
meses[2] = "Março";
meses[3] = "Abril";
meses[4] = "Maio";
meses[5] = "Junho";
meses[6] = "Julho";
meses[7] = "Agosto";
meses[8] = "Setembro";
meses[9] = "Outubro";
meses[10] = "Novembro";
meses[11] = "Dezembro";
function carregaMes() {
var data = new Date();
var option = new Option();
var tags = document.getElementById("meses");
for (var i = 0; i <= data.getMonth(); i++) {
var option = new Option(getMes(i), getMes(i));
tags.add(option);
}
}
function getMes(mes) {
return this.meses[mes];
}<html>
<body onload="carregaMes()">
<select id="meses" name="situacao">
</select>
</body>
</html>If you want to set the current month as default , pass one more parameter in the constructor:
Option(getMes(i), getMes(i), getMes(data.getMonth()), getMes(data.getMonth()));
var meses = new Array(12);
meses[0] = "Janeiro";
meses[1] = "Fevereiro";
meses[2] = "Março";
meses[3] = "Abril";
meses[4] = "Maio";
meses[5] = "Junho";
meses[6] = "Julho";
meses[7] = "Agosto";
meses[8] = "Setembro";
meses[9] = "Outubro";
meses[10] = "Novembro";
meses[11] = "Dezembro";
function carregaMes() {
var data = new Date();
var option = new Option();
var tags = document.getElementById("meses");
for (var i = 0; i <= data.getMonth(); i++) {
var option = new Option(getMes(i), getMes(i), getMes(data.getMonth()), getMes(data.getMonth()));
tags.add(option);
}
}
function getMes(mes) {
return this.meses[mes];
}<html>
<body onload="carregaMes()">
<select id="meses" name="situacao">
</select>
</body>
</html>Using the MomentJS library, you can create a select popu- larly populating all current months according to a range.
So the code stays clean and easy to understand:
$(document).ready(function(){
var start = moment().subtract(15, 'month'); // 15 messes anteriores ao atual.
var end = moment();
while(end >= start ) {
var date = moment(end).format('MMMM/YYYY');
var opt = document.createElement('option');
opt.value = date;
opt.innerHTML = date;
$("#situacao").append(opt);
end = moment(end).subtract(1, 'month');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/pt-br.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><selectid="situacao"></select>