How can I add this and next month to a <select> list with javascript?

Question

Here's what I have tried, which doesn't work:

<select name="mois" id="mois">
    <option value="" selected="selected">...</option>
    <script type="text/javascript">
    <!--//
    var d=new Date();
    var month=new Array(12);
    month[0]="Janvier";
    month[1]="Février";
    month[2]="Mars";
    month[3]="Avril";
    month[4]="Mai";
    month[5]="Juin";
    month[6]="Juillet";
    month[7]="Aout";
    month[8]="Septembre";
    month[9]="Octobre";
    month[10]="Novembre";
    month[11]="Décembre";
    document.write('<option value="'+(d.getMonth()+1)+'">'+month[d.getMonth()]+'</option>');
    //-->
    </script>
</select>

sdleihssirhc · Accepted Answer · 2011-12-04 18:37:51Z

1

Don't use document.write
Don't "hide" your JavaScript with HTML comments.

Use an array literal instead of new Array(12):

 var months = [
    'Janvier', 'Février', 'Mars', 'Avril',
    'Mai', 'Juin', 'Juillet', 'Aout',
    'Septembre', 'Octobre', 'Novembre', 'Décembre'
 ];

Make sure, when checking d.getMonth, that you loop back to the beginning if the current month is the last month of the year (like it is right now):

 var d = new Date(),
    lastMonth = months.length - 1,
    thisMonth = d.getMonth(),
    nextMonth = thisMonth === lastMonth ? 0 : thisMonth + 1;

Once you know the index of next month, you get to choose how to build the new <option> element and add it to the dropdown:
- Use the createElement and appendChild DOM methods.
```
var opt = document.createElement('option'),
   optTxt = document.createTextNode(months[nextMonth]);
opt.appendChild(optTxt);
document.getElementById('mois').appendChild(opt);
```
- Just use innerHTML to do the same thing. A little easier for the developer, but innerHTML might not work on Mobile Safari. Also, if you have event listeners or any other JS stuff going on with the other options in your dropdown, those will be lost.
```
document.getElementById('mois').innerHTML +=
   '<option>' + months[nextMonth] + '</option>';
```
- Use insertAdjacentHTML to get the ease of innerHTML, but without having to discard and rebuild the dropdown's entire DOM. (However, you'll need a shim to make insertAdjacentHTML work with older versions of Firefox.)
```
document.getElementById('mois').insertAdjacentHTML('beforeend',
   '<option>' + months[nextMonth] + '</option>');
```

answered Dec 4, 2011 at 18:37

sdleihssirhc

42.6k6 gold badges56 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Chris Over a year ago

Thanks for all the informations. Works fine... but I need to print the current month + the next month in the select list. Any idea ?

sdleihssirhc Over a year ago

@user1080344 That's no problem. You can do that by simply replacing months[nextMonth] with months[thisMonth] in the examples I provided.

Chris Over a year ago

Thanks so much. I did var opt = document.createElement('option'), optTxt = document.createTextNode(months[thisMonth]); opt.appendChild(optTxt); document.getElementById('mois').appendChild(opt); var opt = document.createElement('option'), optTxt = document.createTextNode(months[nextMonth]); opt.appendChild(optTxt); document.getElementById('mois').appendChild(opt);

Chris Over a year ago

One more thing ! How to insert the value '12' for December and '1' for January ? eg. <option value="12">Décembre</option>

Greg Pettit Over a year ago

@sdleihssirhc It's too large of a framework to load if this is all it's used for, that's for sure. But if it's part of a larger application that's already using jQuery, there's no incremental pageload overhead. In terms of processing overhead, there will be a bit... but for such a trivial function (not iterating over thousands of elements or running thousands of functions) it is worth it for code readability. In other words, if jQuery is not used for anything else, your solution is great! Otherwise, I would just use jQuery.

|

ThinkingStiff · Accepted Answer · 2011-12-29 23:25:09Z

0

You can get the the next month by using .setMonth() and adding 1 to this month. You can add <options> concisely using the new Option( text, value ) syntax and then adding them to the <select> with .add();

Demo: http://jsfiddle.net/ThinkingStiff/UmwKy/

HTML:

<select name="mois" id="mois"></select>

Script:

var month = [
        "Janvier","Février","Mars","Avril","Mai","Juin",
        "Juillet","Aout","Septembre","Octobre","Novembre","Décembre"
    ],  
    now = new Date(),
    mois = document.getElementById( 'mois' );

mois.add( new Option( month[now.getMonth()], now.getMonth() ) );
now.setMonth( now.getMonth() + 1 );
mois.add( new Option( month[now.getMonth()], now.getMonth() ) );

edited Dec 29, 2011 at 23:25

answered Dec 4, 2011 at 18:30

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Collectives™ on Stack Overflow

How can I add this and next month to a <select> list with javascript?

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related