Add <option> automatically each month

Asked

Viewed 324 times

1

I have a payment system, which has a select that displays the months since the system started, follow 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 next month, in the case of March, add the March option automatically, and so on in the coming months.

  • Do you intend to do this with javascript? Because this may give problem if the computer time is wrong...

  • Dude, I have no idea how you do it, if you can do it in js it can be, the site is hosted in a lodging, her schedule is correct.

  • Serves in PHP? You can do Storing months in a bank

  • If you can help me

  • Da to do using JS on the client side, but remember that the current time of the individual’s computer influences. It would be interesting to create something on the server side. If you still want, I’ll create an example of how it would work on the client side

  • Cara do not create in JS. As mentioned above, js is on the client machine. If the time/date is wrong (which can easily happen) your code will not work properly. Do it in a server side language. Much safer. PHP is an example, but there are many others you can use, such as: Python, C#, JS even with Node, etc. Examples, already posted and should not be a problem. Good luck.

Show 1 more comment

3 answers

2


As I mentioned in the comment above, here is a solution on the side of client. I left comments in the code, in case you have any questions 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>

<select id="dt">
  <option value="Dezembro"> Dezembro <option>
</select>

  • I edited the code, now it also captures and populates the year option.

  • Although your answer is marked as solved, it does not answer the question. Your code will always be "December" > "current month". If the current month is "April", your code will skip "January", "February" and "March".

  • @alxwca, sorry, but I didn’t understand... Why will it always be 0? and I concatenei +1 in the variable mes?

  • @Jorgematheus went wrong, had not seen that he had added + 1 in the variable.

2

That code should help you, but not this 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>

0

Using the library Momentjs it is possible to create a select by automatically populating every current month according to a range.

So the code is 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>
<script src="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>

<select id="situacao"></select>

  • Legal didn’t know this library

Browser other questions tagged

You are not signed in. Login or sign up in order to post.