如何使用javascript將此和下個月添加到<select>列表中？

Question

這是我已經盡力了，這是不行的：

<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. 不要使用document.write
2. 不要 「隱藏」 與HTML註釋你的JavaScript 。

3. 使用文字而不是new Array(12)數組：喜歡它是正確的

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

4. 確認，檢查d.getMonth時，你循環回到開始如果當前月份是一年中的最後一個月（現在）：

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

5. 一旦你知道下個月的指標，你可以選擇如何建立新的<option>元素，並將其添加到下拉列表：

   • 使用createElement和appendChild DOM方法。

     var opt = document.createElement('option'), 
         optTxt = document.createTextNode(months[nextMonth]); 
     opt.appendChild(optTxt); 
     document.getElementById('mois').appendChild(opt); 
     

   • 只需使用innerHTML做同樣的事情。開發人員容易一些，但innerHTML might not work on Mobile Safari。另外，如果您的事件監聽器或任何其他JS事件與您的下拉列表中的其他選項一起進行，這些將會丟失。

     document.getElementById('mois').innerHTML += 
         '<option>' + months[nextMonth] + '</option>'; 
     

   • 使用insertAdjacentHTML得到緩解innerHTML，但不必丟棄和重建下拉的整個DOM。 （然而，you'll need a shim to make insertAdjacentHTML work with older versions of Firefox）

     document.getElementById('mois').insertAdjacentHTML('beforeend', 
         '<option>' + months[nextMonth] + '</option>'); 
     

Answer 2

您可以通過使用.setMonth()並添加1本月拿到下個月。您可以使用new Option(text, value)語法簡潔地添加<options>，然後使用.add()將它們添加到<select>;

演示：http://jsfiddle.net/ThinkingStiff/UmwKy/

HTML：

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

腳本：

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()));