如何将这个月和下个月添加到“select”选项中?列表与javascript

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

本文关键字：选项 列表 javascript select 这个月 下个月 添加      更新时间：2023-09-26

这是我尝试过的，但不起作用:

<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>
  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可能无法在Mobile Safari上工作。此外，如果你有事件监听器或任何其他JS的东西在你的下拉菜单中的其他选项，这些将丢失。

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

    • 使用insertAdjacentHTML获得innerHTML的易用性，但不必丢弃和重建下拉菜单的整个DOM。(但是，您需要一个shim才能使insertAdjacentHTML与旧版本的Firefox一起工作。)

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

您可以通过使用.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() ) );

相关文章：