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>

Answer 1

1. Don’t use document.write
2. Don’t “hide” your JavaScript with HTML comments.

3. 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'
    ];
   

4. 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;
   

5. 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>');